oh-vue-2-icons
Version:
Include inline SVG icons from different popular icon packs in Vue 2.
1 lines • 14 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../src/utils/index.js","../src/components/Icon.js","../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["const ESCAPE_MAP = {\r\n \"<\": \"<\",\r\n \">\": \">\",\r\n '\"': \""\",\r\n \"'\": \"'\",\r\n \"&\": \"&\"\r\n};\r\n\r\nconst escapeHTML = (html) => {\r\n return html.replace(/[<>\"&]/g, (c) => ESCAPE_MAP[c] || c);\r\n};\r\n\r\nlet id_count = 0;\r\n\r\nconst getID = (prefix) => {\r\n return prefix + id_count++;\r\n};\r\n\r\nexport default {\r\n escapeHTML,\r\n getID\r\n};\r\n","import Vue from 'vue'\r\nimport utils from \"../utils\";\r\n\r\nconst icons = {};\r\n\r\nconst register = (data) => {\r\n const { name, paths = [], d, polygons = [], points } = data;\r\n\r\n if (d) paths.push({ d });\r\n if (points) polygons.push({ points });\r\n\r\n icons[name] = Object.assign({}, data, {\r\n paths,\r\n polygons\r\n });\r\n\r\n if (!icons[name].minX) icons[name].minX = 0;\r\n if (!icons[name].minY) icons[name].minY = 0;\r\n};\r\n\r\nconst addIcons = (...data) => {\r\n for (const icon of data) register(icon);\r\n};\r\n\r\nconst OhVueIcon = Vue.component('OhVueIcon', {\r\n name: 'OhVueIcon',\r\n props: {\r\n name: {\r\n type: String,\r\n validator: function (val) {\r\n if (val && !(val in icons)) {\r\n console.warn(`Invalid prop: prop \"name\" is referring to an unregistered icon \"${val}\".\\n` +\r\n `Please make sure you have imported this icon before using it.`);\r\n return false;\r\n }\r\n return true;\r\n }\r\n },\r\n title: String,\r\n fill: String,\r\n scale: {\r\n type: [Number, String],\r\n default: 1\r\n },\r\n animation: {\r\n validator: (val) => {\r\n return [\r\n \"spin\",\r\n \"spin-pulse\",\r\n \"wrench\",\r\n \"ring\",\r\n \"pulse\",\r\n \"flash\",\r\n \"float\"\r\n ].includes(val);\r\n }\r\n },\r\n hover: Boolean,\r\n flip: {\r\n validator: (val) => {\r\n return [\"horizontal\", \"vertical\", \"both\"].includes(val);\r\n }\r\n },\r\n speed: {\r\n validator: (val) => {\r\n return val === \"fast\" || val === \"slow\";\r\n }\r\n },\r\n label: String,\r\n inverse: Boolean\r\n },\r\n data() {\r\n return {\r\n children: [],\r\n outerScale: 1.2,\r\n x: null,\r\n y: null\r\n };\r\n },\r\n computed: {\r\n normalizedScale() {\r\n const scale = Number(this.scale);\r\n if (isNaN(scale) || scale <= 0) {\r\n console.warn(`Invalid prop: prop \"scale\" should be a number over 0.`);\r\n return this.outerScale;\r\n }\r\n return scale * this.outerScale;\r\n },\r\n icon() {\r\n return icons[this.name];\r\n },\r\n box() {\r\n const icon = this.icon;\r\n if (icon) {\r\n return `${icon.minX} ${icon.minY} ${icon.width} ${icon.height}`;\r\n }\r\n return `0 0 ${this.width} ${this.height}`;\r\n },\r\n raw() {\r\n // Generates unique id for each icon's SVG element with ID\r\n if (!this.icon || !this.icon.raw) return null;\r\n\r\n const ids = {};\r\n let raw = this.icon.raw;\r\n\r\n raw = raw.replace(\r\n /\\s(?:xml:)?id=([\"']?)([^\"')\\s]+)\\1/g,\r\n (match, quote, id) => {\r\n const uniqueId = utils.getID(\"vat-\");\r\n ids[id] = uniqueId;\r\n return ` id=\"${uniqueId}\"`;\r\n }\r\n );\r\n raw = raw.replace(\r\n /#(?:([^'\")\\s]+)|xpointer\\(id\\((['\"]?)([^')]+)\\2\\)\\))/g,\r\n (match, rawId, _, pointerId) => {\r\n const id = rawId || pointerId;\r\n if (!id || !ids[id]) return match;\r\n return `#${ids[id]}`;\r\n }\r\n );\r\n return raw;\r\n },\r\n ratio() {\r\n const icon = this.icon;\r\n if (!icon) return 1;\r\n return Math.max(icon.width, icon.height) / 16;\r\n },\r\n width() {\r\n return this.icon ? (this.icon.width / this.ratio) * this.normalizedScale : 0;\r\n },\r\n height() {\r\n return this.icon ? (this.icon.height / this.ratio) * this.normalizedScale : 0;\r\n },\r\n style() {\r\n if (this.normalizedScale === 1) return {};\r\n return {\r\n fontSize: this.normalizedScale + 'em'\r\n };\r\n },\r\n klass() {\r\n return {\r\n 'ov-icon': true,\r\n 'ov-inverse': this.inverse,\r\n 'ov-flip-horizontal': this.flip === 'horizontal',\r\n 'ov-flip-vertical': this.flip === 'vertical',\r\n 'ov-flip-both': this.flip === 'both',\r\n 'ov-spin': this.animation === 'spin',\r\n 'ov-spin-pulse': this.animation === 'spin-pulse',\r\n 'ov-wrench': this.animation === 'wrench',\r\n 'ov-ring': this.animation === 'ring',\r\n 'ov-pulse': this.animation === 'pulse',\r\n 'ov-flash': this.animation === 'flash',\r\n 'ov-float': this.animation === 'float',\r\n 'ov-hover': this.hover,\r\n 'ov-fast': this.speed === 'fast',\r\n 'ov-slow': this.speed === 'slow'\r\n };\r\n },\r\n attribs() {\r\n if (!this.icon || !this.icon.attr) return {};\r\n return this.icon.attr;\r\n }\r\n },\r\n methods: {\r\n updateStack() {\r\n if (!this.name && this.name !== null && this.children.length === 0) {\r\n console.warn(`Invalid prop: prop \"name\" is required.`);\r\n return;\r\n }\r\n\r\n if (this.icon) return;\r\n\r\n let width = 0, height = 0;\r\n this.children.forEach((child) => {\r\n child.outerScale = this.normalizedScale;\r\n width = Math.max(width, child.width);\r\n height = Math.max(height, child.height);\r\n });\r\n\r\n this.children.forEach((child) => {\r\n child.x = (width - child.width) / 2;\r\n child.y = (height - child.height) / 2;\r\n });\r\n }\r\n },\r\n mounted() {\r\n this.updateStack();\r\n },\r\n updated() {\r\n this.updateStack();\r\n },\r\n render() {\r\n const attrs = Object.assign(\r\n {\r\n role: this.$attrs.role || (this.label || this.title ? \"img\" : null),\r\n \"aria-label\": this.label || null,\r\n \"aria-hidden\": !(this.label || this.title),\r\n width: this.width,\r\n height: this.height,\r\n viewBox: this.box\r\n },\r\n this.attribs\r\n );\r\n \r\n if (this.attribs.stroke) {\r\n attrs.stroke = this.fill ? this.fill : \"currentColor\";\r\n } else {\r\n attrs.fill = this.fill ? this.fill : \"currentColor\";\r\n }\r\n \r\n if (this.x) attrs.x = this.x.toString();\r\n if (this.y) attrs.y = this.y.toString();\r\n \r\n let options = {\r\n class: this.klass,\r\n style: this.style,\r\n attrs: attrs\r\n };\r\n \r\n if (this.raw) {\r\n const html = this.title\r\n ? `<title>${this.escapeHTML(this.title)}</title>${this.raw}`\r\n : this.raw;\r\n options.domProps = { innerHTML: html };\r\n }\r\n \r\n const content = this.title ? [this.$createElement(\"title\", this.title)] : [];\r\n \r\n const createSVGElement = (name, value, i) => {\r\n return this.$createElement(name, {\r\n attrs: value,\r\n key: `${name}-${i}`\r\n });\r\n };\r\n \r\n return this.$createElement(\r\n \"svg\",\r\n options,\r\n this.raw\r\n ? undefined\r\n : content.concat(\r\n this.$slots.default || \r\n (this.icon ? [\r\n ...this.icon.paths.map((path, i) => createSVGElement(\"path\", path, i)),\r\n ...this.icon.polygons.map((polygon, i) => createSVGElement(\"polygon\", polygon, i))\r\n ] : [])\r\n ))\r\n }\r\n});\r\n\r\n\r\nexport { OhVueIcon, addIcons };","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":["id_count","utils","prefix","icons","register","data","name","paths","d","polygons","points","push","Object","assign","minX","minY","OhVueIcon","Vue","component","props","type","String","validator","val","title","fill","scale","Number","default","animation","includes","hover","Boolean","flip","speed","label","inverse","children","outerScale","x","y","computed","normalizedScale","this","isNaN","icon","box","width","height","raw","ids","replace","match","quote","id","uniqueId","rawId","_","pointerId","ratio","Math","max","style","fontSize","klass","attribs","attr","methods","updateStack","length","forEach","child","mounted","updated","render","attrs","role","$attrs","viewBox","stroke","toString","options","class","html","escapeHTML","domProps","innerHTML","content","$createElement","createSVGElement","value","i","key","concat","$slots","map","path","polygon","styleInject","css","ref","insertAt","document","head","getElementsByTagName","createElement","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode"],"mappings":"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"}