index.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  4. import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
  5. import classNames from 'classnames';
  6. import * as allIcons from '@ant-design/icons/lib/dist';
  7. import VueIcon from '@ant-design/icons-vue';
  8. import PropTypes from '../_util/vue-types';
  9. import createFromIconfontCN from './IconFont';
  10. import { svgBaseProps, withThemeSuffix, removeTypeTheme, getThemeFromTypeName, alias } from './utils';
  11. import warning from '../_util/warning';
  12. import LocaleReceiver from '../locale-provider/LocaleReceiver';
  13. import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
  14. import { filterEmpty, getListeners } from '../_util/props-util';
  15. import Base from '../base';
  16. // Initial setting
  17. // https://github.com/vueComponent/ant-design-vue/issues/2745
  18. VueIcon.add.apply(VueIcon, _toConsumableArray(Object.keys(allIcons).filter(function (key) {
  19. return key !== 'default';
  20. }).map(function (key) {
  21. return allIcons[key];
  22. })));
  23. setTwoToneColor('#1890ff');
  24. var defaultTheme = 'outlined';
  25. var dangerousTheme = void 0;
  26. function renderIcon(h, locale, context) {
  27. var _classNames;
  28. var props = context.$props,
  29. $slots = context.$slots;
  30. var listeners = getListeners(context);
  31. var type = props.type,
  32. Component = props.component,
  33. viewBox = props.viewBox,
  34. spin = props.spin,
  35. theme = props.theme,
  36. twoToneColor = props.twoToneColor,
  37. rotate = props.rotate,
  38. tabIndex = props.tabIndex;
  39. var children = filterEmpty($slots['default']);
  40. children = children.length === 0 ? undefined : children;
  41. warning(Boolean(type || Component || children), 'Icon', 'Icon should have `type` prop or `component` prop or `children`.');
  42. var classString = classNames((_classNames = {}, _defineProperty(_classNames, 'anticon', true), _defineProperty(_classNames, 'anticon-' + type, !!type), _classNames));
  43. var svgClassString = classNames(_defineProperty({}, 'anticon-spin', !!spin || type === 'loading'));
  44. var svgStyle = rotate ? {
  45. msTransform: 'rotate(' + rotate + 'deg)',
  46. transform: 'rotate(' + rotate + 'deg)'
  47. } : undefined;
  48. var innerSvgProps = {
  49. attrs: _extends({}, svgBaseProps, {
  50. viewBox: viewBox
  51. }),
  52. 'class': svgClassString,
  53. style: svgStyle
  54. };
  55. if (!viewBox) {
  56. delete innerSvgProps.attrs.viewBox;
  57. }
  58. var renderInnerNode = function renderInnerNode() {
  59. // component > children > type
  60. if (Component) {
  61. return h(
  62. Component,
  63. innerSvgProps,
  64. [children]
  65. );
  66. }
  67. if (children) {
  68. warning(Boolean(viewBox) || children.length === 1 && children[0].tag === 'use', 'Icon', 'Make sure that you provide correct `viewBox`' + ' prop (default `0 0 1024 1024`) to the icon.');
  69. var _innerSvgProps = {
  70. attrs: _extends({}, svgBaseProps),
  71. 'class': svgClassString,
  72. style: svgStyle
  73. };
  74. return h(
  75. 'svg',
  76. _mergeJSXProps([_innerSvgProps, {
  77. attrs: { viewBox: viewBox }
  78. }]),
  79. [children]
  80. );
  81. }
  82. if (typeof type === 'string') {
  83. var computedType = type;
  84. if (theme) {
  85. var themeInName = getThemeFromTypeName(type);
  86. warning(!themeInName || theme === themeInName, 'Icon', 'The icon name \'' + type + '\' already specify a theme \'' + themeInName + '\',' + (' the \'theme\' prop \'' + theme + '\' will be ignored.'));
  87. }
  88. computedType = withThemeSuffix(removeTypeTheme(alias(computedType)), dangerousTheme || theme || defaultTheme);
  89. return h(VueIcon, {
  90. attrs: {
  91. focusable: 'false',
  92. type: computedType,
  93. primaryColor: twoToneColor
  94. },
  95. 'class': svgClassString, style: svgStyle
  96. });
  97. }
  98. };
  99. var iconTabIndex = tabIndex;
  100. if (iconTabIndex === undefined && 'click' in listeners) {
  101. iconTabIndex = -1;
  102. }
  103. // functional component not support nativeOn,https://github.com/vuejs/vue/issues/7526
  104. var iProps = {
  105. attrs: {
  106. 'aria-label': type && locale.icon + ': ' + type,
  107. tabIndex: iconTabIndex
  108. },
  109. on: listeners,
  110. 'class': classString,
  111. staticClass: ''
  112. };
  113. return h(
  114. 'i',
  115. iProps,
  116. [renderInnerNode()]
  117. );
  118. }
  119. var Icon = {
  120. name: 'AIcon',
  121. props: {
  122. tabIndex: PropTypes.number,
  123. type: PropTypes.string,
  124. component: PropTypes.any,
  125. viewBox: PropTypes.any,
  126. spin: PropTypes.bool.def(false),
  127. rotate: PropTypes.number,
  128. theme: PropTypes.oneOf(['filled', 'outlined', 'twoTone']),
  129. twoToneColor: PropTypes.string,
  130. role: PropTypes.string
  131. },
  132. render: function render(h) {
  133. var _this = this;
  134. return h(LocaleReceiver, {
  135. attrs: {
  136. componentName: 'Icon'
  137. },
  138. scopedSlots: { 'default': function _default(locale) {
  139. return renderIcon(h, locale, _this);
  140. } }
  141. });
  142. }
  143. };
  144. Icon.createFromIconfontCN = createFromIconfontCN;
  145. Icon.getTwoToneColor = getTwoToneColor;
  146. Icon.setTwoToneColor = setTwoToneColor;
  147. /* istanbul ignore next */
  148. Icon.install = function (Vue) {
  149. Vue.use(Base);
  150. Vue.component(Icon.name, Icon);
  151. };
  152. export default Icon;