init

.gitignore

@@ -1,3 +1,6 @@
+# Mac OS X
+.DS_Store
+
 # Logs
 logs
 *.log

.nvmrc

@@ -0,0 +1 @@
+v12.14.1

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 hiroki
+Copyright (c) 2020 Hiroki Osame
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

icon-register.js

@@ -0,0 +1,19 @@
+import svgLayer from './key';
+
+export default {
+	name: 'icon-register',
+	functional: true,
+	props: {
+		id: {
+			type: String,
+			required: true,
+		},
+	},
+	inject: {
+		svgLayer,
+	},
+	render(h, ctx) {
+		const id = ctx.injections.svgLayer.register(ctx.props.id, ctx.children[0]);
+		return h('svg', [h('use', { attrs: { 'xlink:href': `#${id}` }})]);
+	},
+};

icons-layer.vue

@@ -0,0 +1,54 @@
+<template>
+	<div>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			v-show="false"
+		>
+			<template v-for="(icon, id) in icons">
+				<component
+					:id="id"
+					:is="icon"
+				/>
+			</template>
+		</svg>
+		<slot />
+	</div>
+</template>
+
+<script>
+import svgLayer from './key';
+
+export default {
+	name: 'icons-layer',
+
+	props: {
+		namespace: {
+			type: String,
+			default: 'icon-',
+		},
+	},
+
+	provide() {
+		const vm = this;
+		return {
+			[svgLayer]: {
+				register(id, vnode) {
+					const registeredId = vm.namespace + id;
+					vm.$set(
+						vm.icons,
+						registeredId,
+						{ render: () => vnode },
+					);
+					return registeredId;
+				},
+			},
+		};
+	},
+
+	data() {
+		return {
+			icons: {},
+		};
+	},
+};
+</script>

key.js

@@ -0,0 +1 @@
+export default 'vue-svg-icon-set-key';

loader.js

@@ -0,0 +1,17 @@
+const iconRegisterPath = require.resolve('./icon-register');
+
+module.exports = (svgStr) => {
+	const id = 'hello-world';
+
+	// TODO: generate ID from file name, overrideable via WP options
+	// TODO: transpile svg to symbol
+	// TODO: replace color with currentColor
+
+	return `
+<template><icon-register id="${id}">${svgStr}</icon-register></template>
+<script>
+import IconRegister from '${iconRegisterPath}';
+export default { components: { IconRegister } };
+</script>
+`;
+};

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "vue-svg-icon-set",
+  "version": "1.0.0",
+  "description": "",
+  "main": "icons-layer.vue",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Hiroki Osame <hiroki.osame@gmail.com>",
+  "license": "MIT"
+}