index.js 3.8 KB

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