yanghuanyu/cpnode-front
0
0
Fork 0
forked from iod/cpnode-front
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add Iconify icons with unplugin-icons

Browse Source
This commit is contained in:
Nex Zhu 2021-12-27 21:47:25 +08:00
parent 373d34df9f
commit 4c7482cef8
No known key found for this signature in database
GPG Key ID: 15C6254AD19362B4
8 changed files with 373 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.fes.js
View File

@ -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
}),
)
},
}

1
README.md
View File

@ -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:

349
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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": {

7
src/components/UserCenter.vue
View File

@ -1,5 +1,10 @@
<template>
<div class="right">{{ initialState.userName }}</div>
<div class="right">
<i-mdi-account-box
style="color: red; font-size: 2em; vertical-align: middle"
/>
<span>{{ initialState.userName }}</span>
</div>
</template>
<script setup lang="ts">

1
src/types/auto-imports.d.ts vendored
View File

@ -8,7 +8,6 @@ declare global {
const defineComponent: typeof import('vue')['defineComponent']
const effectScope: typeof import('vue')['effectScope']
const EffectScope: typeof import('vue')['EffectScope']
const ElButton: typeof import('element-plus/es')['ElButton']
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: typeof import('vue')['h']

2
src/types/components.d.ts vendored
View File

@ -4,7 +4,7 @@
declare module 'vue' {
export interface GlobalComponents {
ElButton: typeof import('element-plus/es')['ElButton']
IMdiAccountBox: typeof import('~icons/mdi/account-box')['default']
PageLoading: typeof import('./../components/PageLoading.vue')['default']
UserCenter: typeof import('./../components/UserCenter.vue')['default']
}

2
tsconfig.json
View File

@ -7,7 +7,7 @@
"~/*": ["src/*"],
"@@/*": ["src/.fes/*"]
},
"types": ["element-plus/global"]
"types": ["element-plus/global", "unplugin-icons/types/vue"]
},
"include": [
"src/**/*",