Vue3中的Icon处理方案（包括将svg转化为Icon）
在前端项目开发中，SVG（可缩放矢量图形）凭借其无损缩放、体积小、可编辑性强等诸多优势，成为了处理图标（Icon）的热门选择。本文将为大家详细介绍几种在项目中处理 SVG 图作为 Icon 的有效方法。
用组件的方式引入Svg将其作为Icon（vite-svg-loader）
vite-svg-loader不仅仅可以通过组件形式导入，还可以通过url、string的形式进行导入。
vite.config.js
import vue from '@vitejs/plugin-vue'
import SvgLoader from 'vite-svg-loader'export default defineConfig(({ mode }) => {const env = loadEnv(mode, process.cwd())return {base: env.VITE_APP_BASE_URL + '/',plugins: [vue(), svgLoader()]
})结合业务场景为svgLoader做一些额外配置
import vue from '@vitejs/plugin-vue'
import SvgLoader from 'vite-svg-loader'export default defineConfig(({ mode }) => {const env = loadEnv(mode, process.cwd())return {base: env.VITE_APP_BASE_URL + '/',plugins: [vue(), svgLoader({svgoConfig: {plugins: [{name: 'removeAttrs',// 保留这些属性，但不包括idparams: { attrs: '(data-name|class|style)' },},{// 使用 cleanupIds 插件但要小心配置以避免误删除或修改IDname: 'cleanupIds',params: {// 或者使用 minify: false 来禁用 minify 功能，以此保留原始 Ids，不追加的话，svgo会修改svg的id，svg的显示会互相影响minify: false,},},],},})]
})将svg图导出
icon
├── assets // 存放图片
│ └── table.svg
└── src // 抛出所有svg图└── index.ts导出方式一： Icon会有代码提示
除了可以按组件的形式导出，还可以按Url的方式导出
// icon->src->index.ts
// 所有svg图都在此处追加
export { default as table } from '../assets/table.svg?component'<template><div><table></table></div>
</template><script setup lang="ts">
import { table } from '@/components/icon'defineOptions({name: 'Icon',
})</script>
导出方式二：这种方式导出的话，没有代码提示
const svgModules = import.meta.glob('../assets/*.svg', {eager: true,query: 'component',
})// 抛出一个对象，对象中的键名是文件名称，值是`svgModules` 中对应 `path` 的模块
const icons = Object.keys(svgModules).reduce((pre, path) => {const file = path.split('/')const fileName = file[file.length - 1].split('.')[0]pre[fileName] = svgModules[path]return pre
}, {} as any)export default icons<template><div><table></table></div>
</template><script setup lang="ts">
import icons from '@/components/icon'const { table } = iconsdefineOptions({name: 'Icon',
})
使用@iconify/vue插件
npm install --save-dev @iconify/vue在线方式
<template><Icon icon="carbon:bot" />
</template><script setup lang="ts">
import { Icon } from '@iconify/vue'
</script><style scoped lang="scss"></style>
离线方式
默认Iconify是在线加载的，访问有可能不稳定，很多时候私有化部署不能加载外网数据，因此我们需要离线加载。因为Iconify是在线加载元数据，因此，我们可以改为本地自动引入。
导入整个数据集
整个导入图标集，会导致图标集里的图片全部被打包进assets的js文件中，dist文件会特别大。
npm install @iconify/vue @iconify/json// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { Icon } from '@iconify/vue';
// 引入需要的图标集，这里以 Material Design Icons 为例
import materialDesignIcons from '@iconify/json/json/mdi.json';
import { addCollection } from '@iconify/core';// 添加图标集到 Iconify
addCollection(materialDesignIcons);const app = createApp(App);
app.component('Icon', Icon);
app.mount('#app'); app.vue
<template><div><!-- 使用 mdi 图标集中的图标 --><Icon icon="mdi:home" /></div>
</template><script setup>
// 无需额外导入，因为已经在 main.js 中全局注册
</script> 按需加载方式 - 手动按需加载
npm install @iconify/vue全部数据
npm add -D @iconify/json部分数据(以Material Design Icons为例)
npm add -D @iconify-json/mdi图片按需加载工具
npm add -D unplugin-iconstsconfig.json
"compilerOptions": {"types": ["unplugin-icons/types/vue"],}装Vite的图标自动引入插件
// vite.config.tsimport Icons from 'unplugin-icons/vite' //图标按需加载工具export default defineConfig({plugins: [Icons(), //图标按需加载工具],
})
<script setup>
import IconAccessibility from '~icons/carbon/accessibility'
import IconAccountBox from '~icons/mdi/account-box'
</script><template><icon-accessibility/><icon-account-box style="font-size: 2em; color: red"/>
</template>按需加载方式 - 自动按需加载
安装按需加载插件
npm add unplugin-vue-components -D// vite.config.tsimport { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'//icon按需引入
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'export default defineConfig({plugins: [vue(),Components({resolvers: [IconsResolver({prefix: 'icon' // 更改图标前缀}),],}),Icons(),],
})在组件中使用
<template><! --使用icon--><icon-mdi-home />
</template><script setup>
</script>参考内容
https://zhuanlan.zhihu.com/p/688842750
https://juejin.cn/post/7087827571861585956#heading-0
使用vite-plugin-svg-icons插件渲染svg类型的Icon
// svg-icon.vue组件
<template><svgaria-hidden="true"class="svg-icon":style="'width:' + width + ';height:' + height"><use :xlink:href="symbolId" :fill="color" /></svg>
</template><script setup lang="ts">
import { computed } from 'vue';const props = defineProps({prefix: {type: String,default: 'icon'},iconClass: {type: String,required: false},color: {type: String},width: {type: String,default: '12px'},height: {type: String,default: '12px'}
});const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script><style scoped>
.svg-icon {vertical-align: -0.15em;overflow: hidden;fill: currentColor;
}
</style>
// vite.config.ts
import vue from "@vitejs/plugin-vue";
import path from "path";
import { UserConfig, ConfigEnv, loadEnv } from "vite";
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';export default ({ mode }: ConfigEnv): UserConfig =>{// 获取.env环境配置const env = loadEnv(mode, process.cwd());return {base: env.VITE_APP_BASE+'/',plugins: [vue(),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// 指定symbolId格式symbolId: 'icon-[dir]-[name]'})],resolve: {// Vite路径别名配置alias: {'@': path.resolve('./src')}}}
};
// main.tsimport { createApp } from 'vue';
import App from './App.vue';
// 引入svg注册脚本
import 'virtual:svg-icons-register';
// 引入svg组件
import SvgIcon from '@/components/svg-icon/index.vue';const app = createApp(App);// 注册全局组件
app.component('svg-icon', SvgIcon)export default app;<template><div class="bottom-bar"><!-- icon-class的值与src/assets/icons内的文件名相同 --><svg-icon icon-class="version"></svg-icon></div>
</template><script setup lang="ts">
</script><style lang="scss" scoped></style>