123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- export var DEFAULT_ICON_CONFIGS = {
- size: '1em',
- strokeWidth: 4,
- strokeLinecap: 'round',
- strokeLinejoin: 'round',
- rtl: false,
- theme: 'outline',
- colors: {
- outline: {
- fill: '#333',
- background: 'transparent'
- },
- filled: {
- fill: '#333',
- background: '#FFF'
- },
- twoTone: {
- fill: '#333',
- twoTone: '#2F88FF'
- },
- multiColor: {
- outStrokeColor: '#333',
- outFillColor: '#2F88FF',
- innerStrokeColor: '#FFF',
- innerFillColor: '#43CCF8'
- }
- },
- prefix: 'i'
- };
- function guid() {
- return 'icon-' + ((1 + Math.random()) * 0x100000000 | 0).toString(16).substring(1);
- }
- export function IconConverter(id, icon, config) {
- var fill = typeof icon.fill === 'string' ? [icon.fill] : icon.fill || [];
- var colors = [];
- var theme = icon.theme || config.theme;
- switch (theme) {
- case 'outline':
- colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
- colors.push('none');
- colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
- colors.push('none');
- break;
- case 'filled':
- colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
- colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
- colors.push('#FFF');
- colors.push('#FFF');
- break;
- case 'two-tone':
- colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
- colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.twoTone.twoTone);
- colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
- colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.twoTone.twoTone);
- break;
- case 'multi-color':
- colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
- colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.multiColor.outFillColor);
- colors.push(typeof fill[2] === 'string' ? fill[2] : config.colors.multiColor.innerStrokeColor);
- colors.push(typeof fill[3] === 'string' ? fill[3] : config.colors.multiColor.innerFillColor);
- break;
- }
- return {
- size: icon.size || config.size,
- strokeWidth: icon.strokeWidth || config.strokeWidth,
- strokeLinecap: icon.strokeLinecap || config.strokeLinecap,
- strokeLinejoin: icon.strokeLinejoin || config.strokeLinejoin,
- colors: colors,
- id: id
- };
- }
- export function IconWrapper(name, rtl, _render) {
- var options = {
- name: 'icon-' + name,
- inject: {
- ICON_CONFIGS: {
- default: DEFAULT_ICON_CONFIGS
- }
- },
- props: ['size', 'strokeWidth', 'strokeLinecap', 'strokeLinejoin', 'theme', 'fill', 'spin'],
- data: function data() {
- return {
- id: guid()
- };
- },
- inheritAttrs: false,
- render: function render(h) {
- var size = this.size,
- strokeWidth = this.strokeWidth,
- strokeLinecap = this.strokeLinecap,
- strokeLinejoin = this.strokeLinejoin,
- theme = this.theme,
- fill = this.fill,
- id = this.id,
- spin = this.spin,
- _this$ICON_CONFIGS = this.ICON_CONFIGS,
- ICON_CONFIGS = _this$ICON_CONFIGS === void 0 ? DEFAULT_ICON_CONFIGS : _this$ICON_CONFIGS;
- var svgProps = IconConverter(id, {
- size: size,
- strokeWidth: strokeWidth,
- strokeLinecap: strokeLinecap,
- strokeLinejoin: strokeLinejoin,
- theme: theme,
- fill: fill
- }, ICON_CONFIGS);
- var cls = [ICON_CONFIGS.prefix + '-icon'];
- cls.push(ICON_CONFIGS.prefix + '-icon' + '-' + name);
- if (rtl && ICON_CONFIGS.rtl) {
- cls.push(ICON_CONFIGS.prefix + '-icon-rtl');
- }
- if (spin) {
- cls.push(ICON_CONFIGS.prefix + '-icon-spin');
- }
- return h('span', {
- class: cls.join(' '),
- on: this.$listeners,
- attrs: this.$attrs
- }, [_render(h, svgProps)]);
- }
- };
- return options;
- }
|