ant-design-vue/components/icon/index.js

180 lines
4.5 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

import classNames from 'classnames';
import * as allIcons from '@ant-design/icons/lib/dist';
import VueIcon from '@ant-design/icons-vue';
import PropTypes from '../_util/vue-types';
import createFromIconfontCN from './IconFont';
import {
svgBaseProps,
withThemeSuffix,
removeTypeTheme,
getThemeFromTypeName,
alias,
} from './utils';
import warning from '../_util/warning';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
import { filterEmpty, getListeners } from '../_util/props-util';
import Base from '../base';
// Initial setting
VueIcon.add(...Object.keys(allIcons).map(key => allIcons[key]));
setTwoToneColor('#1890ff');
const defaultTheme = 'outlined';
let dangerousTheme;
function renderIcon(h, locale, context) {
const { $props: props, $slots } = context;
const listeners = getListeners(context);
const {
// affect inner <svg>...</svg>
type,
component: Component,
viewBox,
spin,
// other
theme, // default to outlined
twoToneColor,
rotate,
tabIndex,
} = props;
let children = filterEmpty($slots.default);
children = children.length === 0 ? undefined : children;
warning(
Boolean(type || Component || children),
'Icon',
'Icon should have `type` prop or `component` prop or `children`.',
);
const classString = classNames({
[`anticon`]: true,
[`anticon-${type}`]: !!type,
});
const svgClassString = classNames({
[`anticon-spin`]: !!spin || type === 'loading',
});
const svgStyle = rotate
? {
msTransform: `rotate(${rotate}deg)`,
transform: `rotate(${rotate}deg)`,
}
: undefined;
const innerSvgProps = {
attrs: {
...svgBaseProps,
viewBox,
},
class: svgClassString,
style: svgStyle,
};
if (!viewBox) {
delete innerSvgProps.attrs.viewBox;
}
const renderInnerNode = () => {
// component > children > type
if (Component) {
return <Component {...innerSvgProps}>{children}</Component>;
}
if (children) {
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.',
);
const innerSvgProps = {
attrs: {
...svgBaseProps,
},
class: svgClassString,
style: svgStyle,
};
return (
<svg {...innerSvgProps} viewBox={viewBox}>
{children}
</svg>
);
}
if (typeof type === 'string') {
let computedType = type;
if (theme) {
const themeInName = getThemeFromTypeName(type);
warning(
!themeInName || theme === themeInName,
'Icon',
`The icon name '${type}' already specify a theme '${themeInName}',` +
` the 'theme' prop '${theme}' will be ignored.`,
);
}
computedType = withThemeSuffix(
removeTypeTheme(alias(computedType)),
dangerousTheme || theme || defaultTheme,
);
return (
<VueIcon
focusable="false"
class={svgClassString}
type={computedType}
primaryColor={twoToneColor}
style={svgStyle}
/>
);
}
};
let iconTabIndex = tabIndex;
if (iconTabIndex === undefined && 'click' in listeners) {
iconTabIndex = -1;
}
// functional component not support nativeOnhttps://github.com/vuejs/vue/issues/7526
const iProps = {
attrs: {
'aria-label': type && `${locale.icon}: ${type}`,
tabIndex: iconTabIndex,
},
on: listeners,
class: classString,
staticClass: '',
};
return <i {...iProps}>{renderInnerNode()}</i>;
}
const Icon = {
name: 'AIcon',
props: {
tabIndex: PropTypes.number,
type: PropTypes.string,
component: PropTypes.any,
viewBox: PropTypes.any,
spin: PropTypes.bool.def(false),
rotate: PropTypes.number,
theme: PropTypes.oneOf(['filled', 'outlined', 'twoTone']),
twoToneColor: PropTypes.string,
role: PropTypes.string,
},
render(h) {
return (
<LocaleReceiver
componentName="Icon"
scopedSlots={{ default: locale => renderIcon(h, locale, this) }}
/>
);
},
};
Icon.createFromIconfontCN = createFromIconfontCN;
Icon.getTwoToneColor = getTwoToneColor;
Icon.setTwoToneColor = setTwoToneColor;
/* istanbul ignore next */
Icon.install = function(Vue) {
Vue.use(Base);
Vue.component(Icon.name, Icon);
};
export default Icon;