hi-vue-icons
Version:
Include inline SVG icons from different popular icon packs in Vue 2 & 3 easily.
329 lines (315 loc) • 14.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vueDemi = require('vue-demi');
const ESCAPE_MAP = {
"<": "<",
">": ">",
'"': """,
"'": "'",
"&": "&"
};
const escapeHTML = (html) => {
return html.replace(/[<>"&]/g, (c) => ESCAPE_MAP[c] || c);
};
let id_count = 0;
const getID = (prefix) => {
return prefix + id_count++;
};
var utils = {
escapeHTML,
getID
};
const icons = {};
const register = (data) => {
const { name, paths = [], d, polygons = [], points } = data;
if (d)
paths.push({ d });
if (points)
polygons.push({ points });
icons[name] = Object.assign({}, data, {
paths,
polygons
});
if (!icons[name].minX)
icons[name].minX = 0;
if (!icons[name].minY)
icons[name].minY = 0;
};
const addIcons = (...data) => {
for (const icon of data)
register(icon);
};
const listIcons = () => {
return icons;
};
const HiVueIcon = vueDemi.defineComponent({
name: "HiVueIcon",
props: {
name: {
type: String,
validator: (val) => {
if (val && !(val in icons)) {
console.warn(`Invalid prop: prop "name" is referring to an unregistered icon "${val}".
Please make sure you have imported this icon before using it.`);
return false;
}
return true;
}
},
title: String,
fill: String,
scale: {
type: [Number, String],
default: 1
},
animation: {
validator: (val) => {
return [
"spin",
"spin-pulse",
"wrench",
"ring",
"pulse",
"flash",
"float"
].includes(val);
}
},
hover: Boolean,
flip: {
validator: (val) => {
return ["horizontal", "vertical", "both"].includes(val);
}
},
speed: {
validator: (val) => {
return val === "fast" || val === "slow";
}
},
label: String,
inverse: Boolean
},
setup(props) {
const children = vueDemi.ref([]);
const state = vueDemi.reactive({
outerScale: 1.2,
x: null,
y: null
});
const childrenState = vueDemi.reactive({
width: 0,
height: 0
});
const normalizedScale = vueDemi.computed(() => {
const scale = Number(props.scale);
if (isNaN(scale) || scale <= 0) {
console.warn(`Invalid prop: prop "scale" should be a number over 0.`);
return state.outerScale;
}
return scale * state.outerScale;
});
const klass = vueDemi.computed(() => {
const classes = {
"ov-icon": true,
"ov-inverse": props.inverse,
"ov-flip-horizontal": props.flip === "horizontal",
"ov-flip-vertical": props.flip === "vertical",
"ov-flip-both": props.flip === "both",
"ov-spin": props.animation === "spin",
"ov-spin-pulse": props.animation === "spin-pulse",
"ov-wrench": props.animation === "wrench",
"ov-ring": props.animation === "ring",
"ov-pulse": props.animation === "pulse",
"ov-flash": props.animation === "flash",
"ov-float": props.animation === "float",
"ov-hover": props.hover,
"ov-fast": props.speed === "fast",
"ov-slow": props.speed === "slow"
};
return classes;
});
const icon = vueDemi.computed(() => {
if (props.name)
return icons[props.name];
return null;
});
const box = vueDemi.computed(() => {
if (icon.value) {
return `${icon.value.minX} ${icon.value.minY} ${icon.value.width} ${icon.value.height}`;
}
return `0 0 ${width.value} ${height.value}`;
});
const ratio = vueDemi.computed(() => {
if (!icon.value)
return 1;
const { width: width2, height: height2 } = icon.value;
return Math.max(width2, height2) / 16;
});
const width = vueDemi.computed(() => {
return childrenState.width || icon.value && icon.value.width / ratio.value * normalizedScale.value || 0;
});
const height = vueDemi.computed(() => {
return childrenState.height || icon.value && icon.value.height / ratio.value * normalizedScale.value || 0;
});
const style = vueDemi.computed(() => {
if (normalizedScale.value === 1)
return false;
return {
fontSize: normalizedScale.value + "em"
};
});
const raw = vueDemi.computed(() => {
if (!icon.value || !icon.value.raw)
return null;
const ids = {};
let raw2 = icon.value.raw;
raw2 = raw2.replace(/\s(?:xml:)?id=(["']?)([^"')\s]+)\1/g, (match, quote, id) => {
const uniqueId = utils.getID("vat-");
ids[id] = uniqueId;
return ` id="${uniqueId}"`;
});
raw2 = raw2.replace(/#(?:([^'")\s]+)|xpointer\(id\((['"]?)([^')]+)\2\)\))/g, (match, rawId, _, pointerId) => {
const id = rawId || pointerId;
if (!id || !ids[id])
return match;
return `#${ids[id]}`;
});
return raw2;
});
const attribs = vueDemi.computed(() => {
if (!icon.value || !icon.value.attr)
return {};
return icon.value.attr;
});
const updateStack = () => {
if (!props.name && props.name !== null && children.value.length === 0) {
console.warn(`Invalid prop: prop "name" is required.`);
return;
}
if (icon.value)
return;
let width2 = 0, height2 = 0;
children.value.forEach((child) => {
child.outerScale = normalizedScale.value;
width2 = Math.max(width2, child.width);
height2 = Math.max(height2, child.height);
});
childrenState.width = width2;
childrenState.height = height2;
children.value.forEach((child) => {
child.x = (width2 - child.width) / 2;
child.y = (height2 - child.height) / 2;
});
};
vueDemi.onMounted(() => {
updateStack();
});
vueDemi.onUpdated(() => {
updateStack();
});
return {
...vueDemi.toRefs(state),
children,
icon,
klass,
style,
width,
height,
box,
attribs,
raw
};
},
created() {
const parent = this.$parent;
if (parent && parent.children)
parent.children.push(this);
},
render() {
const attrs = Object.assign({
role: this.$attrs.role || (this.label || this.title ? "img" : null),
"aria-label": this.label || null,
"aria-hidden": !(this.label || this.title),
width: this.width,
height: this.height,
viewBox: this.box
}, this.attribs);
if (this.attribs.stroke)
attrs.stroke = this.fill ? this.fill : "currentColor";
else
attrs.fill = this.fill ? this.fill : "currentColor";
if (this.x)
attrs.x = this.x.toString();
if (this.y)
attrs.y = this.y.toString();
let options = {
class: this.klass,
style: this.style
};
if (vueDemi.isVue2) {
options.attrs = attrs;
} else {
options = Object.assign(options, attrs);
}
if (this.raw) {
const html = this.title ? `<title>${utils.escapeHTML(this.title)}</title>${this.raw}` : this.raw;
if (vueDemi.isVue2) {
options.domProps = { innerHTML: html };
} else {
options.innerHTML = html;
}
}
const content = this.title ? [vueDemi.h("title", this.title)] : [];
const svgAttrs = (name, value, i) => {
if (vueDemi.isVue2) {
return vueDemi.h(name, {
attrs: value,
key: `${name}-${i}`
});
} else {
return vueDemi.h(name, {
...value,
key: `${name}-${i}`
});
}
};
return vueDemi.h("svg", options, this.raw ? void 0 : content.concat([
this.$slots.default ? vueDemi.isVue2 ? this.$slots.default : this.$slots.default() : this.icon ? [
...this.icon.paths.map((path, i) => svgAttrs("path", path, i)),
...this.icon.polygons.map((polygon, i) => svgAttrs("polygon", polygon, i))
] : []
]));
}
});
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$2 = ".ov-icon {\r\n display: inline-block;\r\n overflow: visible;\r\n vertical-align: -0.2em;\r\n}\r\n";
styleInject(css_248z$2);
var css_248z$1 = "/* ---------------- spin ---------------- */\r\n.ov-spin:not(.ov-hover),\r\n.ov-spin.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-spin {\r\n animation: ov-spin 1s linear infinite;\r\n}\r\n\r\n.ov-spin:not(.ov-hover).ov-fast,\r\n.ov-spin.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-spin.ov-fast {\r\n animation: ov-spin 0.7s linear infinite;\r\n}\r\n\r\n.ov-spin:not(.ov-hover).ov-slow,\r\n.ov-spin.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-spin.ov-slow {\r\n animation: ov-spin 2s linear infinite;\r\n}\r\n\r\n/* ---------------- spin-pulse ---------------- */\r\n\r\n.ov-spin-pulse:not(.ov-hover),\r\n.ov-spin-pulse.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-spin-pulse {\r\n animation: ov-spin 1s infinite steps(8);\r\n}\r\n\r\n.ov-spin-pulse:not(.ov-hover).ov-fast,\r\n.ov-spin-pulse.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-spin-pulse.ov-fast {\r\n animation: ov-spin 0.7s infinite steps(8);\r\n}\r\n\r\n.ov-spin-pulse:not(.ov-hover).ov-slow,\r\n.ov-spin-pulse.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-spin-pulse.ov-slow {\r\n animation: ov-spin 2s infinite steps(8);\r\n}\r\n\r\n@keyframes ov-spin {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* ---------------- wrench ---------------- */\r\n.ov-wrench:not(.ov-hover),\r\n.ov-wrench.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-wrench {\r\n animation: ov-wrench 2.5s ease infinite;\r\n}\r\n\r\n.ov-wrench:not(.ov-hover).ov-fast,\r\n.ov-wrench.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-wrench.ov-fast {\r\n animation: ov-wrench 1.2s ease infinite;\r\n}\r\n\r\n.ov-wrench:not(.ov-hover).ov-slow,\r\n.ov-wrench.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-wrench.ov-slow {\r\n animation: ov-wrench 3.7s ease infinite;\r\n}\r\n\r\n@keyframes ov-wrench {\r\n 0% {\r\n transform: rotate(-12deg);\r\n }\r\n\r\n 8% {\r\n transform: rotate(12deg);\r\n }\r\n\r\n 10%, 28%, 30%, 48%, 50%, 68% {\r\n transform: rotate(24deg);\r\n }\r\n\r\n 18%, 20%, 38%, 40%, 58%, 60% {\r\n transform: rotate(-24deg);\r\n }\r\n\r\n 75%, 100% {\r\n transform: rotate(0deg);\r\n }\r\n}\r\n\r\n/* ---------------- ring ---------------- */\r\n.ov-ring:not(.ov-hover),\r\n.ov-ring.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-ring {\r\n animation: ov-ring 2s ease infinite;\r\n}\r\n\r\n.ov-ring:not(.ov-hover).ov-fast,\r\n.ov-ring.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-ring.ov-fast {\r\n animation: ov-ring 1s ease infinite;\r\n}\r\n\r\n.ov-ring:not(.ov-hover).ov-slow,\r\n.ov-ring.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-ring.ov-slow {\r\n animation: ov-ring 3s ease infinite;\r\n}\r\n\r\n@keyframes ov-ring {\r\n 0% {\r\n transform: rotate(-15deg);\r\n }\r\n\r\n 2% {\r\n transform: rotate(15deg);\r\n }\r\n\r\n 4%, 12% {\r\n transform: rotate(-18deg);\r\n }\r\n\r\n 6% {\r\n transform: rotate(18deg);\r\n }\r\n\r\n 8% {\r\n transform: rotate(-22deg);\r\n }\r\n\r\n 10% {\r\n transform: rotate(22deg);\r\n }\r\n\r\n 12% {\r\n transform: rotate(-18deg);\r\n }\r\n\r\n 14% {\r\n transform: rotate(18deg);\r\n }\r\n\r\n 16% {\r\n transform: rotate(-12deg);\r\n }\r\n\r\n 18% {\r\n transform: rotate(12deg);\r\n }\r\n\r\n 20%, 100% {\r\n transform: rotate(0deg);\r\n }\r\n}\r\n\r\n/* ---------------- pulse ---------------- */\r\n.ov-pulse:not(.ov-hover),\r\n.ov-pulse.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-pulse {\r\n animation: ov-pulse 2s linear infinite;\r\n}\r\n\r\n.ov-pulse:not(.ov-hover).ov-fast,\r\n.ov-pulse.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-pulse.ov-fast {\r\n animation: ov-pulse 1s linear infinite;\r\n}\r\n\r\n.ov-pulse:not(.ov-hover).ov-slow,\r\n.ov-pulse.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-pulse.ov-slow {\r\n animation: ov-pulse 3s linear infinite;\r\n}\r\n\r\n@keyframes ov-pulse {\r\n 0% {\r\n transform: scale(1.1);\r\n }\r\n\r\n 50% {\r\n transform: scale(0.8);\r\n }\r\n\r\n 100% {\r\n transform: scale(1.1);\r\n }\r\n}\r\n\r\n/* ---------------- flash ---------------- */\r\n.ov-flash:not(.ov-hover),\r\n.ov-flash.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-flash {\r\n animation: ov-flash 2s ease infinite;\r\n}\r\n\r\n.ov-flash:not(.ov-hover).ov-fast,\r\n.ov-flash.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-flash.ov-fast {\r\n animation: ov-flash 1s ease infinite;\r\n}\r\n\r\n.ov-flash:not(.ov-hover).ov-slow,\r\n.ov-flash.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-flash.ov-slow {\r\n animation: ov-flash 3s ease infinite;\r\n}\r\n\r\n@keyframes ov-flash {\r\n 0%, 100%, 50%{\r\n opacity: 1;\r\n }\r\n 25%, 75%{\r\n opacity: 0;\r\n }\r\n}\r\n\r\n/* ---------------- float ---------------- */\r\n.ov-float:not(.ov-hover),\r\n.ov-float.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-float {\r\n animation: ov-float 2s linear infinite;\r\n}\r\n\r\n.ov-float:not(.ov-hover).ov-fast,\r\n.ov-float.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-float.ov-fast {\r\n animation: ov-float 1s linear infinite;\r\n}\r\n\r\n.ov-float:not(.ov-hover).ov-slow,\r\n.ov-float.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-float.ov-slow {\r\n animation: ov-float 3s linear infinite;\r\n}\r\n\r\n@keyframes ov-float {\r\n 0%, 100% {\r\n transform: translateY(-3px);\r\n }\r\n 50% {\r\n transform: translateY(3px);\r\n }\r\n}\r\n";
styleInject(css_248z$1);
var css_248z = ".ov-flip-horizontal {\r\n transform: scale(-1, 1);\r\n}\r\n\r\n.ov-flip-vertical {\r\n transform: scale(1, -1);\r\n}\r\n\r\n.ov-flip-both {\r\n transform: scale(-1, -1);\r\n}\r\n\r\n.ov-inverse {\r\n color: #fff;\r\n}\r\n";
styleInject(css_248z);
exports.HiVueIcon = HiVueIcon;
exports.addIcons = addIcons;
exports.listIcons = listIcons;
//# sourceMappingURL=index.cjs.map