ant-design-vue/components/icon/IconFont.jsx
2019-05-26 13:57:43 +08:00

53 lines
1.5 KiB
Vue

import Icon from './index';
import { mergeProps } from '../_util/props-util';
const customCache = new Set();
export default function create(options) {
const { scriptUrl, extraCommonProps = {} } = options;
/**
* DOM API required.
* Make sure in browser environment.
* The Custom Icon will create a <script/>
* that loads SVG symbols and insert the SVG Element into the document body.
*/
if (
typeof document !== 'undefined' &&
typeof window !== 'undefined' &&
typeof document.createElement === 'function' &&
typeof scriptUrl === 'string' &&
scriptUrl.length &&
!customCache.has(scriptUrl)
) {
const script = document.createElement('script');
script.setAttribute('src', scriptUrl);
script.setAttribute('data-namespace', scriptUrl);
customCache.add(scriptUrl);
document.body.appendChild(script);
}
const Iconfont = {
functional: true,
name: 'AIconfont',
props: Icon.props,
render(h, context) {
const { props, slots, listeners, data } = context;
const { type, ...restProps } = props;
const slotsMap = slots();
const children = slotsMap.default;
// component > children > type
let content = null;
if (type) {
content = <use {...{ attrs: { 'xlink:href': `#${type}` } }} />;
}
if (children) {
content = children;
}
const iconProps = mergeProps(extraCommonProps, data, { props: restProps, on: listeners });
return <Icon {...iconProps}>{content}</Icon>;
},
};
return Iconfont;
}