From 4c7482cef892b1ee806b77cadc7e9284c3dd9a07 Mon Sep 17 00:00:00 2001 From: Nex Zhu <4370605+NexZhu@users.noreply.github.com> Date: Mon, 27 Dec 2021 21:47:25 +0800 Subject: [PATCH] feat: add Iconify icons with unplugin-icons --- .fes.js | 14 +- README.md | 1 + package-lock.json | 349 ++++++++++++++++++++++++++++++++++ package.json | 2 + src/components/UserCenter.vue | 7 +- src/types/auto-imports.d.ts | 1 - src/types/components.d.ts | 2 +- tsconfig.json | 2 +- 8 files changed, 373 insertions(+), 5 deletions(-) diff --git a/.fes.js b/.fes.js index 1d83cdb..6fcbb6d 100644 --- a/.fes.js +++ b/.fes.js @@ -4,6 +4,8 @@ import StylelintPlugin from 'stylelint-webpack-plugin' import AutoImportPlugin from 'unplugin-auto-import/webpack' import VueComponentsPlugin from 'unplugin-vue-components/webpack' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' +import IconsPlugin from 'unplugin-icons/webpack' +import IconsResolver from 'unplugin-icons/resolver' export default { publicPath: './', @@ -39,13 +41,16 @@ export default { config.plugin('eslint').use(ESLintPlugin, [ { files: 'src/**/*.{js,ts,tsx,vue}', + fix: true, }, ]) config.plugin('stylelint').use(StylelintPlugin, [ { extensions: ['css', 'scss', 'vue', 'tsx'], + fix: true, }, ]) + config.plugin('auto-import').use( AutoImportPlugin({ dts: './src/types/auto-imports.d.ts', @@ -71,7 +76,7 @@ export default { /src\/.+\.vue$/, /src\/.+\.vue\?vue/, // .vue ], - resolvers: [ElementPlusResolver()], + resolvers: [ElementPlusResolver(), IconsResolver()], }), ) // Temporary workaround for Element Plus + unplugin-vue-components bug when importing `v-loading` @@ -79,5 +84,12 @@ export default { config.externals({ 'element-plus/es/components/loading-directive/style/css': 'undefined', }) + + config.plugin('icons').use( + IconsPlugin({ + compiler: 'vue3', + autoInstall: true, // expiremental + }), + ) }, } diff --git a/README.md b/README.md index f3337e9..273098a 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ Basic: `master` branch: - [Element Plus](https://element-plus.org/): component library +- [Iconify](https://iconify.design/) icons with [unplugin-icons](https://github.com/antfu/unplugin-icons) `antd` branch: diff --git a/package-lock.json b/package-lock.json index 6b2fa5c..33a92b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "@daotl/tsconfig": "^0.0.4", "@fesjs/plugin-sass": "^2.0.0", "@fesjs/plugin-windicss": "^2.0.4", + "@iconify-json/mdi": "^1.0.12", "@vue/compiler-sfc": "^3.2.26", "cross-env": "^7.0.3", "eslint-webpack-plugin": "^3.1.1", @@ -36,6 +37,7 @@ "stylelint-webpack-plugin": "^3.1.0", "typescript": "^4.5.4", "unplugin-auto-import": "^0.5.5", + "unplugin-icons": "^0.13.0", "unplugin-vue-components": "^0.17.11" } }, @@ -71,6 +73,133 @@ "license": "MIT", "peer": true }, + "node_modules/@antfu/install-pkg": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.1.0.tgz", + "integrity": "sha512-VaIJd3d1o7irZfK1U0nvBsHMyjkuyMP3HKYVV53z8DKyulkHKmjhhtccXO51WSPeeSHIeoJEoNOKavYpS7jkZw==", + "dev": true, + "dependencies": { + "execa": "^5.1.1", + "find-up": "^5.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@antfu/install-pkg/node_modules/execa": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", + "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==", + "dev": true, + "dependencies": { + "cross-spawn": "^7.0.3", + "get-stream": "^6.0.0", + "human-signals": "^2.1.0", + "is-stream": "^2.0.0", + "merge-stream": "^2.0.0", + "npm-run-path": "^4.0.1", + "onetime": "^5.1.2", + "signal-exit": "^3.0.3", + "strip-final-newline": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sindresorhus/execa?sponsor=1" + } + }, + "node_modules/@antfu/install-pkg/node_modules/find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "dev": true, + "dependencies": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@antfu/install-pkg/node_modules/get-stream": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", + "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@antfu/install-pkg/node_modules/is-stream": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", + "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@antfu/install-pkg/node_modules/locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "dev": true, + "dependencies": { + "p-locate": "^5.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@antfu/install-pkg/node_modules/npm-run-path": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", + "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==", + "dev": true, + "dependencies": { + "path-key": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@antfu/install-pkg/node_modules/p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "dev": true, + "dependencies": { + "p-limit": "^3.0.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@antfu/install-pkg/node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/@antfu/utils": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.3.0.tgz", @@ -2167,6 +2296,30 @@ "dev": true, "license": "BSD-3-Clause" }, + "node_modules/@iconify-json/mdi": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.0.12.tgz", + "integrity": "sha512-smYQpxDqSCUdySFSYZpH0BAEVbgFnU4IE/Hb36zavseOl3zFlKDvGOEFPC7djkEabrIWi9KDAUdbtIREcgVE8A==", + "dev": true, + "dependencies": { + "@iconify/types": "^1.0.10" + } + }, + "node_modules/@iconify/types": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.12.tgz", + "integrity": "sha512-6er6wSGF3hgc1JEZqiGpg21CTCjHBYOUwqLmb2Idzkjiw6ogalGP0ZMLVutCzah+0WB4yP+Zd2oVPN8jvJ+Ftg==", + "dev": true + }, + "node_modules/@iconify/utils": { + "version": "1.0.20", + "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-1.0.20.tgz", + "integrity": "sha512-J5IriR8KeANs8vIEFKWzOlOvNgZHkwqkmqaIwvqtuDbBeFHtXGfM/LYMDmjtRJ0AAa7f254qw6TK7gAibYfHUA==", + "dev": true, + "dependencies": { + "@iconify/types": "^1.0.12" + } + }, "node_modules/@microsoft/tsdoc": { "version": "0.13.2", "dev": true, @@ -8072,6 +8225,12 @@ "integrity": "sha512-RTSoaUAfLvpR357vWzAz/50Q/BmHfmE6ETSWfutT0AJiw10e6CmcdYRQJlLRd95B53D0Y2aD1jSxD3V3ySF+PA==", "dev": true }, + "node_modules/kolorist": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.5.1.tgz", + "integrity": "sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==", + "dev": true + }, "node_modules/less": { "version": "3.9.0", "resolved": "https://registry.npmjs.org/less/-/less-3.9.0.tgz", @@ -13008,6 +13167,56 @@ } } }, + "node_modules/unplugin-icons": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.13.0.tgz", + "integrity": "sha512-CyAl0HV3bZUGT7ut9agpPRhEYXCvufr80Fh72yrkD57BVCTZ7ze10Rt63ZrvPXiJQpd+aI/Bizm2aqOf3WPSfg==", + "dev": true, + "dependencies": { + "@antfu/install-pkg": "^0.1.0", + "@antfu/utils": "^0.4.0", + "@iconify/utils": "^1.0.20", + "debug": "^4.3.3", + "kolorist": "^1.5.1", + "local-pkg": "^0.4.0", + "unplugin": "^0.2.21" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@svgr/core": "^5.5.0", + "@vue/compiler-sfc": "^3.0.2", + "vue-template-compiler": "^2.6.12", + "vue-template-es2015-compiler": "^1.9.0" + }, + "peerDependenciesMeta": { + "@svgr/core": { + "optional": true + }, + "@vue/compiler-sfc": { + "optional": true + }, + "vue-template-compiler": { + "optional": true + }, + "vue-template-es2015-compiler": { + "optional": true + } + } + }, + "node_modules/unplugin-icons/node_modules/@antfu/utils": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.4.0.tgz", + "integrity": "sha512-gqkpvjkgFUu+s3kP+Ly33OKpo5zvVY3FDFhv5BIb98SncS3KD6DNxPfNDjwHIoyXbz1leWo1j8DtRLZ1D2Jv+Q==", + "dev": true, + "dependencies": { + "@types/throttle-debounce": "^2.1.0" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, "node_modules/unplugin-vue-components": { "version": "0.17.11", "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.17.11.tgz", @@ -14577,6 +14786,90 @@ } } }, + "@antfu/install-pkg": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.1.0.tgz", + "integrity": "sha512-VaIJd3d1o7irZfK1U0nvBsHMyjkuyMP3HKYVV53z8DKyulkHKmjhhtccXO51WSPeeSHIeoJEoNOKavYpS7jkZw==", + "dev": true, + "requires": { + "execa": "^5.1.1", + "find-up": "^5.0.0" + }, + "dependencies": { + "execa": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", + "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==", + "dev": true, + "requires": { + "cross-spawn": "^7.0.3", + "get-stream": "^6.0.0", + "human-signals": "^2.1.0", + "is-stream": "^2.0.0", + "merge-stream": "^2.0.0", + "npm-run-path": "^4.0.1", + "onetime": "^5.1.2", + "signal-exit": "^3.0.3", + "strip-final-newline": "^2.0.0" + } + }, + "find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "dev": true, + "requires": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + } + }, + "get-stream": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", + "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==", + "dev": true + }, + "is-stream": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", + "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", + "dev": true + }, + "locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "dev": true, + "requires": { + "p-locate": "^5.0.0" + } + }, + "npm-run-path": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", + "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==", + "dev": true, + "requires": { + "path-key": "^3.0.0" + } + }, + "p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "dev": true, + "requires": { + "p-limit": "^3.0.2" + } + }, + "path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true + } + } + }, "@antfu/utils": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.3.0.tgz", @@ -15988,6 +16281,30 @@ "version": "1.2.1", "dev": true }, + "@iconify-json/mdi": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.0.12.tgz", + "integrity": "sha512-smYQpxDqSCUdySFSYZpH0BAEVbgFnU4IE/Hb36zavseOl3zFlKDvGOEFPC7djkEabrIWi9KDAUdbtIREcgVE8A==", + "dev": true, + "requires": { + "@iconify/types": "^1.0.10" + } + }, + "@iconify/types": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.12.tgz", + "integrity": "sha512-6er6wSGF3hgc1JEZqiGpg21CTCjHBYOUwqLmb2Idzkjiw6ogalGP0ZMLVutCzah+0WB4yP+Zd2oVPN8jvJ+Ftg==", + "dev": true + }, + "@iconify/utils": { + "version": "1.0.20", + "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-1.0.20.tgz", + "integrity": "sha512-J5IriR8KeANs8vIEFKWzOlOvNgZHkwqkmqaIwvqtuDbBeFHtXGfM/LYMDmjtRJ0AAa7f254qw6TK7gAibYfHUA==", + "dev": true, + "requires": { + "@iconify/types": "^1.0.12" + } + }, "@microsoft/tsdoc": { "version": "0.13.2", "dev": true @@ -20207,6 +20524,12 @@ "integrity": "sha512-RTSoaUAfLvpR357vWzAz/50Q/BmHfmE6ETSWfutT0AJiw10e6CmcdYRQJlLRd95B53D0Y2aD1jSxD3V3ySF+PA==", "dev": true }, + "kolorist": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.5.1.tgz", + "integrity": "sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==", + "dev": true + }, "less": { "version": "3.9.0", "resolved": "https://registry.npmjs.org/less/-/less-3.9.0.tgz", @@ -23705,6 +24028,32 @@ "unplugin": "^0.2.21" } }, + "unplugin-icons": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.13.0.tgz", + "integrity": "sha512-CyAl0HV3bZUGT7ut9agpPRhEYXCvufr80Fh72yrkD57BVCTZ7ze10Rt63ZrvPXiJQpd+aI/Bizm2aqOf3WPSfg==", + "dev": true, + "requires": { + "@antfu/install-pkg": "^0.1.0", + "@antfu/utils": "^0.4.0", + "@iconify/utils": "^1.0.20", + "debug": "^4.3.3", + "kolorist": "^1.5.1", + "local-pkg": "^0.4.0", + "unplugin": "^0.2.21" + }, + "dependencies": { + "@antfu/utils": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.4.0.tgz", + "integrity": "sha512-gqkpvjkgFUu+s3kP+Ly33OKpo5zvVY3FDFhv5BIb98SncS3KD6DNxPfNDjwHIoyXbz1leWo1j8DtRLZ1D2Jv+Q==", + "dev": true, + "requires": { + "@types/throttle-debounce": "^2.1.0" + } + } + } + }, "unplugin-vue-components": { "version": "0.17.11", "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.17.11.tgz", diff --git a/package.json b/package.json index 8c75b62..cd76bd4 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "@daotl/tsconfig": "^0.0.4", "@fesjs/plugin-sass": "^2.0.0", "@fesjs/plugin-windicss": "^2.0.4", + "@iconify-json/mdi": "^1.0.12", "@vue/compiler-sfc": "^3.2.26", "cross-env": "^7.0.3", "eslint-webpack-plugin": "^3.1.1", @@ -56,6 +57,7 @@ "stylelint-webpack-plugin": "^3.1.0", "typescript": "^4.5.4", "unplugin-auto-import": "^0.5.5", + "unplugin-icons": "^0.13.0", "unplugin-vue-components": "^0.17.11" }, "dependencies": { diff --git a/src/components/UserCenter.vue b/src/components/UserCenter.vue index 2778451..f740dbe 100644 --- a/src/components/UserCenter.vue +++ b/src/components/UserCenter.vue @@ -1,5 +1,10 @@