From 4f30cb6cdf2b1acca6533e6a8b9c74f2f8e264ca Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 28 Feb 2021 04:13:36 +0800 Subject: [PATCH] feat: use vite-plugin-icons --- package-lock.json | 71 +++++++++++++++++++++++++---- package.json | 3 +- src/components/Feature.vue | 2 +- src/components/Features.vue | 7 +++ src/components/Navbar.vue | 9 ++-- src/components/icons/IconAlien.vue | 8 ---- src/components/icons/IconArrow.vue | 13 ------ src/components/icons/IconGithub.vue | 8 ---- src/components/icons/IconMoon.vue | 20 -------- src/components/icons/IconSun.vue | 20 -------- vite.config.js | 14 +++++- 11 files changed, 89 insertions(+), 86 deletions(-) delete mode 100644 src/components/icons/IconAlien.vue delete mode 100644 src/components/icons/IconArrow.vue delete mode 100644 src/components/icons/IconGithub.vue delete mode 100644 src/components/icons/IconMoon.vue delete mode 100644 src/components/icons/IconSun.vue diff --git a/package-lock.json b/package-lock.json index 716bd07..396c563 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "vite-vue2-example", "version": "1.0.0", "license": "MIT", "dependencies": { @@ -25,7 +26,8 @@ "eslint-plugin-vue": "7.6.0", "prettier": "2.2.1", "vite": "2.0.3", - "vite-plugin-components": "0.7.3", + "vite-plugin-components": "0.7.5", + "vite-plugin-icons": "^0.3.2", "vite-plugin-vue2": "1.2.1", "vite-plugin-windicss": "0.5.4" } @@ -454,6 +456,19 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/@iconify/json": { + "version": "1.1.309", + "resolved": "https://registry.npmjs.org/@iconify/json/-/json-1.1.309.tgz", + "integrity": "sha512-L9556ireR0vOEcrIc54AJpwhts+T4YKArkB5NkxQCMk5b4Rc9+DviglggXByaR2ryqyRZT1/cv1AD/xJtQBQ6g==", + "dev": true, + "peer": true + }, + "node_modules/@iconify/json-tools": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/@iconify/json-tools/-/json-tools-1.0.10.tgz", + "integrity": "sha512-LFelJDOLZ6JHlmlAkgrvmcu4hpNPB91KYcr4f60D/exzU1eNOb4/KCVHIydGHIQFaOacIOD+Xy+B7P1z812cZg==", + "dev": true + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz", @@ -4716,11 +4731,10 @@ } }, "node_modules/vite-plugin-components": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/vite-plugin-components/-/vite-plugin-components-0.7.3.tgz", - "integrity": "sha512-OomlwTsyZn8M1xhth7gUxOE2FJZ1v/wn/TQhcJiFCxcsFnxvRiCMleRHzFrJUdRcN0QiM3lTCX3sKRthdOd+9w==", + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/vite-plugin-components/-/vite-plugin-components-0.7.5.tgz", + "integrity": "sha512-Sly+l1GMRqLeeOFXc9uT1wJUSZQ0LP/65h/c4NK9CWdw2HhHBuB/yyp3ocPLfaq2k+KUeIX2J/Vco/G4hGAy4w==", "dev": true, - "license": "MIT", "dependencies": { "chokidar": "^3.5.1", "debug": "^4.3.2", @@ -4734,6 +4748,24 @@ "vite": "^2.0.0-beta.69" } }, + "node_modules/vite-plugin-icons": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/vite-plugin-icons/-/vite-plugin-icons-0.3.2.tgz", + "integrity": "sha512-6HDBO6aqJLaJ8lkT9FChAUtniRRzhDWbhNzJLfT7QdDcQ2kaapReksngNEA1+tNlFd5Auey4VGS2VjI3V1KkvA==", + "dev": true, + "dependencies": { + "@iconify/json-tools": "^1.0.10", + "vue-template-es2015-compiler": "^1.9.1" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@iconify/json": "*", + "@vue/compiler-sfc": "^3.0.2", + "vue-template-compiler": "^2.6.12" + } + }, "node_modules/vite-plugin-vue2": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/vite-plugin-vue2/-/vite-plugin-vue2-1.2.1.tgz", @@ -5304,6 +5336,19 @@ "strip-json-comments": "^3.1.1" } }, + "@iconify/json": { + "version": "1.1.309", + "resolved": "https://registry.npmjs.org/@iconify/json/-/json-1.1.309.tgz", + "integrity": "sha512-L9556ireR0vOEcrIc54AJpwhts+T4YKArkB5NkxQCMk5b4Rc9+DviglggXByaR2ryqyRZT1/cv1AD/xJtQBQ6g==", + "dev": true, + "peer": true + }, + "@iconify/json-tools": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/@iconify/json-tools/-/json-tools-1.0.10.tgz", + "integrity": "sha512-LFelJDOLZ6JHlmlAkgrvmcu4hpNPB91KYcr4f60D/exzU1eNOb4/KCVHIydGHIQFaOacIOD+Xy+B7P1z812cZg==", + "dev": true + }, "@nodelib/fs.scandir": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz", @@ -8686,9 +8731,9 @@ } }, "vite-plugin-components": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/vite-plugin-components/-/vite-plugin-components-0.7.3.tgz", - "integrity": "sha512-OomlwTsyZn8M1xhth7gUxOE2FJZ1v/wn/TQhcJiFCxcsFnxvRiCMleRHzFrJUdRcN0QiM3lTCX3sKRthdOd+9w==", + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/vite-plugin-components/-/vite-plugin-components-0.7.5.tgz", + "integrity": "sha512-Sly+l1GMRqLeeOFXc9uT1wJUSZQ0LP/65h/c4NK9CWdw2HhHBuB/yyp3ocPLfaq2k+KUeIX2J/Vco/G4hGAy4w==", "dev": true, "requires": { "chokidar": "^3.5.1", @@ -8697,6 +8742,16 @@ "minimatch": "^3.0.4" } }, + "vite-plugin-icons": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/vite-plugin-icons/-/vite-plugin-icons-0.3.2.tgz", + "integrity": "sha512-6HDBO6aqJLaJ8lkT9FChAUtniRRzhDWbhNzJLfT7QdDcQ2kaapReksngNEA1+tNlFd5Auey4VGS2VjI3V1KkvA==", + "dev": true, + "requires": { + "@iconify/json-tools": "^1.0.10", + "vue-template-es2015-compiler": "^1.9.1" + } + }, "vite-plugin-vue2": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/vite-plugin-vue2/-/vite-plugin-vue2-1.2.1.tgz", diff --git a/package.json b/package.json index 21b838b..2cb5f45 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "eslint-plugin-vue": "7.6.0", "prettier": "2.2.1", "vite": "2.0.3", - "vite-plugin-components": "0.7.3", + "vite-plugin-components": "0.7.5", + "vite-plugin-icons": "^0.3.2", "vite-plugin-vue2": "1.2.1", "vite-plugin-windicss": "0.5.4" }, diff --git a/src/components/Feature.vue b/src/components/Feature.vue index b65bc7a..b1508a5 100644 --- a/src/components/Feature.vue +++ b/src/components/Feature.vue @@ -16,7 +16,7 @@ class="inline-flex items-center mt-3 text-green-500" > Learn More - + diff --git a/src/components/Features.vue b/src/components/Features.vue index b9adf03..65296f5 100644 --- a/src/components/Features.vue +++ b/src/components/Features.vue @@ -35,6 +35,13 @@ url="https://github.com/windicss/vite-plugin-windicss" /> +
+ +
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 1fc6e60..6151729 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -33,22 +33,21 @@ class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white" to="/aliens" > - + - +
diff --git a/src/components/icons/IconAlien.vue b/src/components/icons/IconAlien.vue deleted file mode 100644 index 0c0f2ba..0000000 --- a/src/components/icons/IconAlien.vue +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/src/components/icons/IconArrow.vue b/src/components/icons/IconArrow.vue deleted file mode 100644 index ebe8620..0000000 --- a/src/components/icons/IconArrow.vue +++ /dev/null @@ -1,13 +0,0 @@ - diff --git a/src/components/icons/IconGithub.vue b/src/components/icons/IconGithub.vue deleted file mode 100644 index a736e5a..0000000 --- a/src/components/icons/IconGithub.vue +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/src/components/icons/IconMoon.vue b/src/components/icons/IconMoon.vue deleted file mode 100644 index 39858bb..0000000 --- a/src/components/icons/IconMoon.vue +++ /dev/null @@ -1,20 +0,0 @@ - diff --git a/src/components/icons/IconSun.vue b/src/components/icons/IconSun.vue deleted file mode 100644 index 9b03d5d..0000000 --- a/src/components/icons/IconSun.vue +++ /dev/null @@ -1,20 +0,0 @@ - diff --git a/vite.config.js b/vite.config.js index 2166313..8b2adfe 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,6 +3,7 @@ import { defineConfig } from "vite"; import { createVuePlugin } from "vite-plugin-vue2"; import ViteComponents from "vite-plugin-components"; import WindiCSS from "vite-plugin-windicss"; +import ViteIcons, { ViteIconsResolver } from "vite-plugin-icons"; const config = defineConfig({ resolve: { @@ -17,8 +18,17 @@ const config = defineConfig({ }, plugins: [ - createVuePlugin({}), - ViteComponents({ transformer: "vue2" }), + createVuePlugin(), + ViteComponents({ + customComponentResolvers: [ + ViteIconsResolver({ + componentPrefix: "", + }), + ], + }), + ViteIcons({ + defaultStyle: "", + }), WindiCSS(), ],