index.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.IconConverter = IconConverter;
  6. exports.IconWrapper = IconWrapper;
  7. exports.DEFAULT_ICON_CONFIGS = void 0;
  8. var DEFAULT_ICON_CONFIGS = {
  9. size: '1em',
  10. strokeWidth: 4,
  11. strokeLinecap: 'round',
  12. strokeLinejoin: 'round',
  13. rtl: false,
  14. theme: 'outline',
  15. colors: {
  16. outline: {
  17. fill: '#333',
  18. background: 'transparent'
  19. },
  20. filled: {
  21. fill: '#333',
  22. background: '#FFF'
  23. },
  24. twoTone: {
  25. fill: '#333',
  26. twoTone: '#2F88FF'
  27. },
  28. multiColor: {
  29. outStrokeColor: '#333',
  30. outFillColor: '#2F88FF',
  31. innerStrokeColor: '#FFF',
  32. innerFillColor: '#43CCF8'
  33. }
  34. },
  35. prefix: 'i'
  36. };
  37. exports.DEFAULT_ICON_CONFIGS = DEFAULT_ICON_CONFIGS;
  38. function guid() {
  39. return 'icon-' + ((1 + Math.random()) * 0x100000000 | 0).toString(16).substring(1);
  40. }
  41. function IconConverter(id, icon, config) {
  42. var fill = typeof icon.fill === 'string' ? [icon.fill] : icon.fill || [];
  43. var colors = [];
  44. var theme = icon.theme || config.theme;
  45. switch (theme) {
  46. case 'outline':
  47. colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
  48. colors.push('none');
  49. colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
  50. colors.push('none');
  51. break;
  52. case 'filled':
  53. colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
  54. colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
  55. colors.push('#FFF');
  56. colors.push('#FFF');
  57. break;
  58. case 'two-tone':
  59. colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
  60. colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.twoTone.twoTone);
  61. colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
  62. colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.twoTone.twoTone);
  63. break;
  64. case 'multi-color':
  65. colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
  66. colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.multiColor.outFillColor);
  67. colors.push(typeof fill[2] === 'string' ? fill[2] : config.colors.multiColor.innerStrokeColor);
  68. colors.push(typeof fill[3] === 'string' ? fill[3] : config.colors.multiColor.innerFillColor);
  69. break;
  70. }
  71. return {
  72. size: icon.size || config.size,
  73. strokeWidth: icon.strokeWidth || config.strokeWidth,
  74. strokeLinecap: icon.strokeLinecap || config.strokeLinecap,
  75. strokeLinejoin: icon.strokeLinejoin || config.strokeLinejoin,
  76. colors: colors,
  77. id: id
  78. };
  79. }
  80. function IconWrapper(name, rtl, _render) {
  81. var options = {
  82. name: 'icon-' + name,
  83. inject: {
  84. ICON_CONFIGS: {
  85. default: DEFAULT_ICON_CONFIGS
  86. }
  87. },
  88. props: ['size', 'strokeWidth', 'strokeLinecap', 'strokeLinejoin', 'theme', 'fill', 'spin'],
  89. data: function data() {
  90. return {
  91. id: guid()
  92. };
  93. },
  94. inheritAttrs: false,
  95. render: function render(h) {
  96. var size = this.size,
  97. strokeWidth = this.strokeWidth,
  98. strokeLinecap = this.strokeLinecap,
  99. strokeLinejoin = this.strokeLinejoin,
  100. theme = this.theme,
  101. fill = this.fill,
  102. id = this.id,
  103. spin = this.spin,
  104. _this$ICON_CONFIGS = this.ICON_CONFIGS,
  105. ICON_CONFIGS = _this$ICON_CONFIGS === void 0 ? DEFAULT_ICON_CONFIGS : _this$ICON_CONFIGS;
  106. var svgProps = IconConverter(id, {
  107. size: size,
  108. strokeWidth: strokeWidth,
  109. strokeLinecap: strokeLinecap,
  110. strokeLinejoin: strokeLinejoin,
  111. theme: theme,
  112. fill: fill
  113. }, ICON_CONFIGS);
  114. var cls = [ICON_CONFIGS.prefix + '-icon'];
  115. cls.push(ICON_CONFIGS.prefix + '-icon' + '-' + name);
  116. if (rtl && ICON_CONFIGS.rtl) {
  117. cls.push(ICON_CONFIGS.prefix + '-icon-rtl');
  118. }
  119. if (spin) {
  120. cls.push(ICON_CONFIGS.prefix + '-icon-spin');
  121. }
  122. return h('span', {
  123. class: cls.join(' '),
  124. on: this.$listeners,
  125. attrs: this.$attrs
  126. }, [_render(h, svgProps)]);
  127. }
  128. };
  129. return options;
  130. }