ai-2-icons
Version:
Simplified svg
221 lines (220 loc) • 11.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: !0 });
var n = require("vue");
function o(n) {
return n && "object" == typeof n && "default" in n ? n : { default: n };
}
let e = 0;
var t = (n) => n + e++;
const i = {},
r = (n) => {
const { name: o, paths: e = [], d: t, polygons: r = [], points: s } = n;
t && e.push({ d: t }),
s && r.push({ points: s }),
(i[o] = Object.assign({}, n, { paths: e, polygons: r })),
i[o].minX || (i[o].minX = 0),
i[o].minY || (i[o].minY = 0);
},
s = o(n).default.component("OhVueIcon", {
name: "OhVueIcon",
props: {
name: {
type: String,
validator: function (n) {
return !n || n in i;
},
},
title: String,
fill: String,
scale: { type: [Number, String], default: 1 },
animation: {
validator: (n) =>
[
"spin",
"spin-pulse",
"wrench",
"ring",
"pulse",
"flash",
"float",
].includes(n),
},
hover: Boolean,
flip: {
validator: (n) => ["horizontal", "vertical", "both"].includes(n),
},
speed: { validator: (n) => "fast" === n || "slow" === n },
label: String,
inverse: Boolean,
},
data: () => ({ children: [], outerScale: 1.2, x: null, y: null }),
computed: {
normalizedScale() {
const n = Number(this.scale);
return isNaN(n) || n <= 0 ? this.outerScale : n * this.outerScale;
},
icon() {
return i[this.name];
},
box() {
const n = this.icon;
return n
? `${n.minX} ${n.minY} ${n.width} ${n.height}`
: `0 0 ${this.width} ${this.height}`;
},
raw() {
if (!this.icon || !this.icon.raw) return null;
const n = {};
let o = this.icon.raw;
return (
(o = o.replace(/\s(?:xml:)?id=(["']?)([^"')\s]+)\1/g, (o, e, i) => {
const r = t("vat-");
return (n[i] = r), ` id="${r}"`;
})),
(o = o.replace(
/#(?:([^'")\s]+)|xpointer\(id\((['"]?)([^')]+)\2\)\))/g,
(o, e, t, i) => {
const r = e || i;
return r && n[r] ? `#${n[r]}` : o;
}
)),
o
);
},
ratio() {
const n = this.icon;
return n ? Math.max(n.width, n.height) / 16 : 1;
},
width() {
return this.icon
? (this.icon.width / this.ratio) * this.normalizedScale
: 0;
},
height() {
return this.icon
? (this.icon.height / this.ratio) * this.normalizedScale
: 0;
},
style() {
return 1 === this.normalizedScale
? {}
: { fontSize: this.normalizedScale + "em" };
},
klass() {
return {
"ov-icon": !0,
"ov-inverse": this.inverse,
"ov-flip-horizontal": "horizontal" === this.flip,
"ov-flip-vertical": "vertical" === this.flip,
"ov-flip-both": "both" === this.flip,
"ov-spin": "spin" === this.animation,
"ov-spin-pulse": "spin-pulse" === this.animation,
"ov-wrench": "wrench" === this.animation,
"ov-ring": "ring" === this.animation,
"ov-pulse": "pulse" === this.animation,
"ov-flash": "flash" === this.animation,
"ov-float": "float" === this.animation,
"ov-hover": this.hover,
"ov-fast": "fast" === this.speed,
"ov-slow": "slow" === this.speed,
};
},
attribs() {
return this.icon && this.icon.attr ? this.icon.attr : {};
},
},
methods: {
updateStack() {
if (!this.name && null !== this.name && 0 === this.children.length)
return;
if (this.icon) return;
let n = 0,
o = 0;
this.children.forEach((e) => {
(e.outerScale = this.normalizedScale),
(n = Math.max(n, e.width)),
(o = Math.max(o, e.height));
}),
this.children.forEach((e) => {
(e.x = (n - e.width) / 2), (e.y = (o - e.height) / 2);
});
},
},
mounted() {
this.updateStack();
},
updated() {
this.updateStack();
},
render() {
const n = 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
);
this.attribs.stroke
? (n.stroke = this.fill ? this.fill : "currentColor")
: (n.fill = this.fill ? this.fill : "currentColor"),
this.x && (n.x = this.x.toString()),
this.y && (n.y = this.y.toString());
let o = { class: this.klass, style: this.style, attrs: n };
if (this.raw) {
const n = this.title
? `<title>${this.escapeHTML(this.title)}</title>${this.raw}`
: this.raw;
o.domProps = { innerHTML: n };
}
const e = this.title ? [this.$createElement("title", this.title)] : [],
t = (n, o, e) => this.$createElement(n, { attrs: o, key: `${n}-${e}` });
return this.$createElement(
"svg",
o,
this.raw
? void 0
: e.concat(
this.$slots.default ||
(this.icon
? [
...this.icon.paths.map((n, o) => t("path", n, o)),
...this.icon.polygons.map((n, o) => t("polygon", n, o)),
]
: [])
)
);
},
});
function v(n, o) {
void 0 === o && (o = {});
var e = o.insertAt;
if (n && "undefined" != typeof document) {
var t = document.head || document.getElementsByTagName("head")[0],
i = document.createElement("style");
(i.type = "text/css"),
"top" === e && t.firstChild
? t.insertBefore(i, t.firstChild)
: t.appendChild(i),
i.styleSheet
? (i.styleSheet.cssText = n)
: i.appendChild(document.createTextNode(n));
}
}
v(
".ov-icon {\n display: inline-block;\n overflow: visible;\n vertical-align: -0.2em;\n}\n"
);
v(
"/* ---------------- spin ---------------- */\n.ov-spin:not(.ov-hover),\n.ov-spin.ov-hover:hover,\n.ov-parent.ov-hover:hover > .ov-spin {\n animation: ov-spin 1s linear infinite;\n}\n\n.ov-spin:not(.ov-hover).ov-fast,\n.ov-spin.ov-hover.ov-fast:hover,\n.ov-parent.ov-hover:hover > .ov-spin.ov-fast {\n animation: ov-spin 0.7s linear infinite;\n}\n\n.ov-spin:not(.ov-hover).ov-slow,\n.ov-spin.ov-hover.ov-slow:hover,\n.ov-parent.ov-hover:hover > .ov-spin.ov-slow {\n animation: ov-spin 2s linear infinite;\n}\n\n/* ---------------- spin-pulse ---------------- */\n\n.ov-spin-pulse:not(.ov-hover),\n.ov-spin-pulse.ov-hover:hover,\n.ov-parent.ov-hover:hover > .ov-spin-pulse {\n animation: ov-spin 1s infinite steps(8);\n}\n\n.ov-spin-pulse:not(.ov-hover).ov-fast,\n.ov-spin-pulse.ov-hover.ov-fast:hover,\n.ov-parent.ov-hover:hover > .ov-spin-pulse.ov-fast {\n animation: ov-spin 0.7s infinite steps(8);\n}\n\n.ov-spin-pulse:not(.ov-hover).ov-slow,\n.ov-spin-pulse.ov-hover.ov-slow:hover,\n.ov-parent.ov-hover:hover > .ov-spin-pulse.ov-slow {\n animation: ov-spin 2s infinite steps(8);\n}\n\n@keyframes ov-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* ---------------- wrench ---------------- */\n.ov-wrench:not(.ov-hover),\n.ov-wrench.ov-hover:hover,\n.ov-parent.ov-hover:hover > .ov-wrench {\n animation: ov-wrench 2.5s ease infinite;\n}\n\n.ov-wrench:not(.ov-hover).ov-fast,\n.ov-wrench.ov-hover.ov-fast:hover,\n.ov-parent.ov-hover:hover > .ov-wrench.ov-fast {\n animation: ov-wrench 1.2s ease infinite;\n}\n\n.ov-wrench:not(.ov-hover).ov-slow,\n.ov-wrench.ov-hover.ov-slow:hover,\n.ov-parent.ov-hover:hover > .ov-wrench.ov-slow {\n animation: ov-wrench 3.7s ease infinite;\n}\n\n@keyframes ov-wrench {\n 0% {\n transform: rotate(-12deg);\n }\n\n 8% {\n transform: rotate(12deg);\n }\n\n 10%, 28%, 30%, 48%, 50%, 68% {\n transform: rotate(24deg);\n }\n\n 18%, 20%, 38%, 40%, 58%, 60% {\n transform: rotate(-24deg);\n }\n\n 75%, 100% {\n transform: rotate(0deg);\n }\n}\n\n/* ---------------- ring ---------------- */\n.ov-ring:not(.ov-hover),\n.ov-ring.ov-hover:hover,\n.ov-parent.ov-hover:hover > .ov-ring {\n animation: ov-ring 2s ease infinite;\n}\n\n.ov-ring:not(.ov-hover).ov-fast,\n.ov-ring.ov-hover.ov-fast:hover,\n.ov-parent.ov-hover:hover > .ov-ring.ov-fast {\n animation: ov-ring 1s ease infinite;\n}\n\n.ov-ring:not(.ov-hover).ov-slow,\n.ov-ring.ov-hover.ov-slow:hover,\n.ov-parent.ov-hover:hover > .ov-ring.ov-slow {\n animation: ov-ring 3s ease infinite;\n}\n\n@keyframes ov-ring {\n 0% {\n transform: rotate(-15deg);\n }\n\n 2% {\n transform: rotate(15deg);\n }\n\n 4%, 12% {\n transform: rotate(-18deg);\n }\n\n 6% {\n transform: rotate(18deg);\n }\n\n 8% {\n transform: rotate(-22deg);\n }\n\n 10% {\n transform: rotate(22deg);\n }\n\n 12% {\n transform: rotate(-18deg);\n }\n\n 14% {\n transform: rotate(18deg);\n }\n\n 16% {\n transform: rotate(-12deg);\n }\n\n 18% {\n transform: rotate(12deg);\n }\n\n 20%, 100% {\n transform: rotate(0deg);\n }\n}\n\n/* ---------------- pulse ---------------- */\n.ov-pulse:not(.ov-hover),\n.ov-pulse.ov-hover:hover,\n.ov-parent.ov-hover:hover > .ov-pulse {\n animation: ov-pulse 2s linear infinite;\n}\n\n.ov-pulse:not(.ov-hover).ov-fast,\n.ov-pulse.ov-hover.ov-fast:hover,\n.ov-parent.ov-hover:hover > .ov-pulse.ov-fast {\n animation: ov-pulse 1s linear infinite;\n}\n\n.ov-pulse:not(.ov-hover).ov-slow,\n.ov-pulse.ov-hover.ov-slow:hover,\n.ov-parent.ov-hover:hover > .ov-pulse.ov-slow {\n animation: ov-pulse 3s linear infinite;\n}\n\n@keyframes ov-pulse {\n 0% {\n transform: scale(1.1);\n }\n\n 50% {\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1.1);\n }\n}\n\n/* ---------------- flash ---------------- */\n.ov-flash:not(.ov-hover),\n.ov-flash.ov-hover:hover,\n.ov-parent.ov-hover:hover > .ov-flash {\n animation: ov-flash 2s ease infinite;\n}\n\n.ov-flash:not(.ov-hover).ov-fast,\n.ov-flash.ov-hover.ov-fast:hover,\n.ov-parent.ov-hover:hover > .ov-flash.ov-fast {\n animation: ov-flash 1s ease infinite;\n}\n\n.ov-flash:not(.ov-hover).ov-slow,\n.ov-flash.ov-hover.ov-slow:hover,\n.ov-parent.ov-hover:hover > .ov-flash.ov-slow {\n animation: ov-flash 3s ease infinite;\n}\n\n@keyframes ov-flash {\n 0%, 100%, 50%{\n opacity: 1;\n }\n 25%, 75%{\n opacity: 0;\n }\n}\n\n/* ---------------- float ---------------- */\n.ov-float:not(.ov-hover),\n.ov-float.ov-hover:hover,\n.ov-parent.ov-hover:hover > .ov-float {\n animation: ov-float 2s linear infinite;\n}\n\n.ov-float:not(.ov-hover).ov-fast,\n.ov-float.ov-hover.ov-fast:hover,\n.ov-parent.ov-hover:hover > .ov-float.ov-fast {\n animation: ov-float 1s linear infinite;\n}\n\n.ov-float:not(.ov-hover).ov-slow,\n.ov-float.ov-hover.ov-slow:hover,\n.ov-parent.ov-hover:hover > .ov-float.ov-slow {\n animation: ov-float 3s linear infinite;\n}\n\n@keyframes ov-float {\n 0%, 100% {\n transform: translateY(-3px);\n }\n 50% {\n transform: translateY(3px);\n }\n}\n"
);
v(
".ov-flip-horizontal {\n transform: scale(-1, 1);\n}\n\n.ov-flip-vertical {\n transform: scale(1, -1);\n}\n\n.ov-flip-both {\n transform: scale(-1, -1);\n}\n\n.ov-inverse {\n color: #fff;\n}\n"
),
(exports.OhVueIcon = s),
(exports.addIcons = (...n) => {
for (const o of n) r(o);
});
//# sourceMappingURL=index.cjs.map