132 lines
3.8 KiB
JavaScript
132 lines
3.8 KiB
JavaScript
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;
|
|
} |