unplugin-icons
unplugin-icons copied to clipboard
Published
20 hours ago •
unplugin
unplugin
使用auto import之后，如何for循环使用。
package.json
{
"name": "init",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"build:dev": "vue-tsc --noEmit && vite build --mode development",
"build:pro": "vue-tsc --noEmit && vite build --mode production",
"preview": "vite preview",
"lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
"prettier": "prettier --write ."
},
"dependencies": {
"element-plus": "^1.0.2-beta.71",
"qs": "^6.9.6",
"vue": "^3.2.25"
},
"devDependencies": {
"@iconify-json/carbon": "^1.1.4",
"@iconify-json/mdi": "^1.1.12",
"@types/js-cookie": "^3.0.2",
"@types/node": "^17.0.29",
"@types/nprogress": "^0.2.0",
"@typescript-eslint/eslint-plugin": "^5.21.0",
"@typescript-eslint/parser": "^5.21.0",
"@vitejs/plugin-vue": "^2.3.1",
"axios": "^0.27.2",
"dart-sass": "^1.25.0",
"eslint": "^8.14.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.7.1",
"js-cookie": "^3.0.1",
"nprogress": "^0.2.0",
"pinia": "^2.0.0-rc.10",
"prettier": "^2.6.2",
"sass": "^1.51.0",
"typescript": "^4.5.4",
"unplugin-auto-import": "^0.7.1",
"unplugin-icons": "^0.14.3",
"unplugin-vue-components": "^0.19.5",
"vite": "^2.9.5",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-inspect": "^0.5.0",
"vue-router": "^4.0.14",
"vue-tsc": "^0.34.7"
}
}
vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import viteCompression from 'vite-plugin-compression'
import Inspect from 'vite-plugin-inspect'
const pathSrc = path.resolve(__dirname, 'src')
// https://vitejs.dev/config/
export default defineConfig({
server: {
host: '0.0.0.0',
port: 3000,
open: false,
https: false,
proxy: {}
},
plugins: [
vue(),
AutoImport({
// Auto import functions from Vue, e.g. ref, reactive, toRef...
// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
imports: ['vue'],
// Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
resolvers: [
ElementPlusResolver(),
// Auto import icon components
// 自动导入图标组件
IconsResolver(),
],
dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
}),
Components({
resolvers: [
// Auto register icon components
// 自动注册图标组件
IconsResolver({
prefix: 'icon',
}),
// Auto register Element Plus components
// 自动导入 Element Plus 组件
ElementPlusResolver(),
],
dts: path.resolve(pathSrc, 'components.d.ts'),
}),
Icons({
autoInstall: true,
}),
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz'
}),
Inspect()
],
resolve: {
alias: {
'@': pathSrc
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/assets/style/main.scss";'
}
}
},
build: {
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
}
});
vue
<template>
<div id="app-header">
<div class="page-container">
<div class="name">xxxxxxxxxxxxxx</div>
<div class="menus-area">
<div
:class="['menu-item', active == index ? 'active' : '']"
v-for="(menu, index) in menuList"
@click="menuChange(index)"
>
<el-icon :size="20">
<icon-mdi-account />
<component :key="index" :is="menu.icon" />
</el-icon>
{{ menu.name }}
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
let active = ref(0)
const menuList = reactive([
{ id: 0, name: 'xx', url: 'home', icon: 'edit' },
{ id: 1, name: 'xx', url: 'home', icon: 'edit' },
{ id: 2, name: 'xx', url: 'home', icon: 'edit' },
{ id: 3, name: 'xx', url: 'home', icon: 'edit' },
{ id: 4, name: 'xx', url: 'home', icon: 'edit' },
{ id: 5, name: 'xx', url: 'home', icon: 'edit' },
{ id: 6, name: 'xx', url: 'home', icon: 'edit' },
])
const menuChange = (i:number):void => {
active.value = i;
}
</script>
#5 这里的方式我都试过了，里面还是不能动态使用 icon。
请问 import { Icon } from '@iconify/vue'; 这个能配合 AutoImport 使用吗，我搜索一下，没找到相关示例
@so1ve 全局注册后 不知道他还是不是按需的
import { Icon } from '@iconify/vue';
app.component('Icon', Icon)
#5 这里的方式我都试过了，里面还是不能动态使用 icon。 请问
import { Icon } from '@iconify/vue';这个能配合AutoImport使用吗，我搜索一下，没找到相关示例
可以使用unplugin-vue-components/vite的自定义解析器来实现Icon组件的自动引入
Components({
dirs: ['src/views', 'src/components'],
resolvers: [
// 自动导入 Element Plus 组件
ElementPlusResolver(),
// 自动引入图标组件
IconsResolver({
customCollections: [
'my-icons',
]
}),
//自定义解析器: 用于自动引入Icon组件
(componentName) => {
if (componentName === 'Icon')
return { name: componentName, from: '@iconify/vue' }
},
],
}),
