@fe6/icon-cube-vue
Version:
Water Icon 的支持自定义图标
251 lines (226 loc) • 10.4 kB
JavaScript
import { createVNode as _createVNode } from "vue";
import { inject, provide, defineComponent } from 'vue';
export var DEFAULT_ICON_CONFIGS = {
size: '1em',
spin: false,
strokeWidth: 4,
strokeLinecap: 'round',
strokeLinejoin: 'round',
rtl: false,
theme: 'outline',
colors: {
outline: {
outStrokeColor: '#333',
outFillColor: 'transparent'
},
filled: {
outStrokeColor: '#333',
outFillColor: '#fff'
},
twoTone: {
outStrokeColor: '#333',
outFillColor: '#2f88ff'
},
multiColor: {
outStrokeColor: '#333',
outFillColor: '#2f88ff',
innerStrokeColor: '#fff',
innerFillColor: '#43ccf8'
}
},
prefix: 'cube'
};
export var getSvgItem = function getSvgItem(svgId) {
var iconCube = window.__iconCube__;
return svgId && iconCube ? iconCube[svgId] : null;
};
var hasOwnProperty = Object.prototype.hasOwnProperty;
var hasOwn = function hasOwn(val, key) {
return hasOwnProperty.call(val, key);
};
var objectToString = Object.prototype.toString;
var toTypeString = function toTypeString(value) {
return objectToString.call(value);
};
export var getSvgProp = function getSvgProp(svgItem, attr, type, canSet, defValue) {
if (!svgItem || !hasOwn(svgItem, attr)) {
return defValue;
}
;
var propConfig = toTypeString(svgItem[attr]) === "[object ".concat(type, "]") ? svgItem[attr] : defValue;
if (attr === 'content' || attr === 'canSet') {
return propConfig;
}
return canSet ? propConfig : defValue;
};
var getColors = function getColors(theme, oldColor, defColors) {
var newColors = [];
switch (theme) {
case 'outline':
newColors.push(oldColor[0] || defColors.outline.outStrokeColor);
newColors.push(oldColor[1] || defColors.outline.outFillColor);
newColors.push(oldColor[0] || defColors.outline.outStrokeColor);
newColors.push(oldColor[1] || defColors.outline.outFillColor);
break;
case 'filled':
newColors.push(oldColor[0] || defColors.filled.outStrokeColor);
newColors.push(oldColor[0] || defColors.filled.outStrokeColor);
newColors.push(oldColor[1] || defColors.filled.outFillColor);
newColors.push(oldColor[1] || defColors.filled.outFillColor);
break;
case 'twoTone':
newColors.push(oldColor[0] || defColors.twoTone.outStrokeColor);
newColors.push(oldColor[1] || defColors.twoTone.outFillColor);
newColors.push(oldColor[0] || defColors.twoTone.outStrokeColor);
newColors.push(oldColor[1] || defColors.twoTone.outFillColor);
break;
case 'multiColor':
newColors.push(oldColor[0] || defColors.multiColor.outStrokeColor);
newColors.push(oldColor[1] || defColors.multiColor.outFillColor);
newColors.push(oldColor[2] || defColors.multiColor.innerStrokeColor);
newColors.push(oldColor[3] || defColors.multiColor.innerFillColor);
break;
}
return newColors;
};
export var IconConverter = function IconConverter(id, icon, config) {
var fill = (icon === null || icon === void 0 ? void 0 : icon.colors) || [];
var oldColors = [];
var svgItem = getSvgItem(id);
var canSet = getSvgProp(svgItem, 'canSet', 'Boolean', false, true);
var theme = getSvgProp(svgItem, 'theme', 'String', canSet, (icon === null || icon === void 0 ? void 0 : icon.theme) || config.theme);
switch (theme) {
case 'outline':
oldColors.push(typeof fill[0] === 'string' && !config.colors.outline.outStrokeColor ? fill[0] : config.colors.outline.outStrokeColor);
oldColors.push(typeof fill[1] === 'string' && !config.colors.outline.outFillColor ? fill[1] : config.colors.outline.outFillColor);
oldColors.push(typeof fill[0] === 'string' && !config.colors.outline.outStrokeColor ? fill[0] : config.colors.outline.outStrokeColor);
oldColors.push(typeof fill[1] === 'string' && !config.colors.outline.outFillColor ? fill[1] : config.colors.outline.outFillColor);
break;
case 'filled':
oldColors.push(typeof fill[0] === 'string' && !config.colors.filled.outStrokeColor ? fill[0] : config.colors.filled.outStrokeColor);
oldColors.push(typeof fill[0] === 'string' && !config.colors.filled.outStrokeColor ? fill[0] : config.colors.filled.outStrokeColor);
oldColors.push(typeof fill[1] === 'string' && !config.colors.filled.outFillColor ? fill[1] : config.colors.filled.outFillColor);
oldColors.push(typeof fill[1] === 'string' && !config.colors.filled.outFillColor ? fill[1] : config.colors.filled.outFillColor);
break;
case 'twoTone':
oldColors.push(typeof fill[0] === 'string' && !config.colors.twoTone.outStrokeColor ? fill[0] : config.colors.twoTone.outStrokeColor);
oldColors.push(typeof fill[1] === 'string' && !config.colors.twoTone.outFillColor ? fill[1] : config.colors.twoTone.outFillColor);
oldColors.push(typeof fill[0] === 'string' && !config.colors.twoTone.outStrokeColor ? fill[0] : config.colors.twoTone.outStrokeColor);
oldColors.push(typeof fill[1] === 'string' && !config.colors.twoTone.outFillColor ? fill[1] : config.colors.twoTone.outFillColor);
break;
case 'multiColor':
oldColors.push(typeof fill[0] === 'string' && !config.colors.multiColor.outStrokeColor ? fill[0] : config.colors.multiColor.outStrokeColor);
oldColors.push(typeof fill[1] === 'string' && !config.colors.multiColor.outFillColor ? fill[1] : config.colors.multiColor.outFillColor);
oldColors.push(typeof fill[2] === 'string' && !config.colors.multiColor.innerStrokeColor ? fill[2] : config.colors.multiColor.innerStrokeColor);
oldColors.push(typeof fill[3] === 'string' && !config.colors.multiColor.innerFillColor ? fill[3] : config.colors.multiColor.innerFillColor);
break;
}
var size = getSvgProp(svgItem, 'size', 'String', canSet, String((icon === null || icon === void 0 ? void 0 : icon.size) || config.size));
var strokeLinejoin = getSvgProp(svgItem, 'strokeLinejoin', 'String', canSet, (icon === null || icon === void 0 ? void 0 : icon.strokeLinejoin) || config.strokeLinejoin);
var strokeLinecap = getSvgProp(svgItem, 'strokeLinecap', 'String', canSet, (icon === null || icon === void 0 ? void 0 : icon.strokeLinecap) || config.strokeLinecap);
var strokeWidth = getSvgProp(svgItem, 'strokeWidth', 'String', canSet, (icon === null || icon === void 0 ? void 0 : icon.strokeWidth) || config.strokeWidth);
var spin = getSvgProp(svgItem, 'spin', 'String', canSet, (icon === null || icon === void 0 ? void 0 : icon.spin) || config.spin);
var colors = getSvgProp(svgItem, 'colors', 'Array', canSet, (icon === null || icon === void 0 ? void 0 : icon.colors) || oldColors).slice();
colors = getColors(theme, colors, config.colors);
return {
size: size,
strokeWidth: strokeWidth,
strokeLinecap: strokeLinecap,
strokeLinejoin: strokeLinejoin,
colors: colors,
spin: spin,
id: id
};
};
var IconContext = Symbol('cube-icon-context');
export var IconProvider = function IconProvider(config) {
provide(IconContext, config);
};
export var IconWrapper = function IconWrapper(name, rtl, render) {
var options = defineComponent({
name: 'icon-' + name,
props: ['size', 'strokeWidth', 'strokeLinecap', 'strokeLinejoin', 'theme', 'colors', 'spin', 'id'],
setup: function setup(props) {
var ICON_CONFIGS = inject(IconContext, DEFAULT_ICON_CONFIGS) || DEFAULT_ICON_CONFIGS;
return function () {
var size = props.size,
strokeWidth = props.strokeWidth,
strokeLinecap = props.strokeLinecap,
strokeLinejoin = props.strokeLinejoin,
theme = props.theme,
colors = props.colors,
spin = props.spin;
var propsId = String(props.id ? props.id : name);
var svgProps = IconConverter(propsId, {
size: size,
strokeWidth: strokeWidth,
strokeLinecap: strokeLinecap,
strokeLinejoin: strokeLinejoin,
theme: theme,
colors: colors,
spin: spin,
id: propsId
}, ICON_CONFIGS);
var cls = ["".concat(ICON_CONFIGS.prefix, "-icon")];
cls.push("".concat(ICON_CONFIGS.prefix, "-icon-").concat(name));
if (rtl && ICON_CONFIGS.rtl) {
cls.push("".concat(ICON_CONFIGS.prefix, "-icon-rtl"));
}
if (spin && String(spin) === 'true') {
cls.push("".concat(ICON_CONFIGS.prefix, "-icon-spin"));
}
return name === 'cube' ? _createVNode("span", {
"class": cls.join(' '),
"innerHTML": render(svgProps)
}, null) : _createVNode("span", {
"class": cls.join(' ')
}, [render(svgProps)]);
};
}
});
return options;
};
export var IconWrapperCustomer = function IconWrapperCustomer(name, rtl, render) {
var options = {
name: 'icon-' + name,
props: ['size', 'strokeWidth', 'strokeLinecap', 'strokeLinejoin', 'theme', 'colors', 'spin', 'id'],
setup: function setup(props) {
var ICON_CONFIGS = inject(IconContext, DEFAULT_ICON_CONFIGS) || DEFAULT_ICON_CONFIGS;
return function () {
var size = props.size,
strokeWidth = props.strokeWidth,
strokeLinecap = props.strokeLinecap,
strokeLinejoin = props.strokeLinejoin,
theme = props.theme,
colors = props.colors,
spin = props.spin;
var propsId = String(props.id ? props.id : name);
var svgProps = IconConverter(propsId, {
size: size,
strokeWidth: strokeWidth,
strokeLinecap: strokeLinecap,
strokeLinejoin: strokeLinejoin,
theme: theme,
colors: colors,
spin: spin,
id: propsId
}, ICON_CONFIGS);
var cls = ["".concat(ICON_CONFIGS.prefix, "-icon")];
cls.push("".concat(ICON_CONFIGS.prefix, "-icon-").concat(name));
if (rtl && ICON_CONFIGS.rtl) {
cls.push("".concat(ICON_CONFIGS.prefix, "-icon-rtl"));
}
if (spin && String(spin) === 'true') {
cls.push("".concat(ICON_CONFIGS.prefix, "-icon-spin"));
}
return name === 'cube' ? _createVNode("span", {
"class": cls.join(' '),
"innerHTML": render(svgProps)
}, null) : _createVNode("span", {
"class": cls.join(' ')
}, [render(svgProps)]);
};
}
};
return options;
};