vue3+ts+vite+ant环境中Icon自定义图标处理方案:SvgIcon
vue3+ts+vite的svg自定义图标设置
在vue项目中,我们除了使用组件库(ant-design-vue element-ui)的icon以外,还有我们自己自定义的图标,对于自定义图标的话,我们暂时还缺少显示的方式。所以说我们需要一个自定义的组件,来显示我们自定义的 svg
图标。
我们用的iconfont里的图标 有的会用线上的图标,直接调用,但是会出现 如果线上服务器崩了,我们的图标是不是也都不显示了,这里我们一般都是把图标下载下来。
这里目前推荐下载svg格式的图标。
1,首先去官网下载自己需要的icon图标,注意是svg格式的 iconfont-阿里巴巴矢量图标库
2,将下载下来的图标放置到项目中专门放图片的文件夹中,可以单独放一个svg目录中
一、安装vite-plugin-svg-icons
此处还需要安装下fast-glob相关依赖,不然vite运行时会报Cannot find module 'fast-glob’的错误,
如果npm安装的就这么安装
npm i vite-plugin-svg-icons -D
npm i fast-glob@3.x -D
如果是yarn下载环境的,使用ant组件库的项目,就要这么安装,这里fast-glob@3.x用npm安装,亲测用yarn安装就报错,npm安装就可以
yarn add vite-plugin-svg-icons -D
npm i fast-glob@3.x -D
二、在src/components/svgIcon下新建组件svgIcon.vue
<template>
<svg aria-hidden="true" :class="svgClass">
<use :xlink:href="symbolId" :fill="props.color" />
</svg>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'svg-icon'
})
</script>
<script lang="ts" setup>
import { computed } from 'vue'
const props = defineProps({
prefix: {
type: String,
default: 'icon'
},
name: {
type: String,
required: true
},
color: {
type: String,
default: '#333'
},
className: {
type: String,
default: ''
}
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${props.className}`
}
return 'svg-icon'
})
</script>
<style>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.1em;
/* 因icon大小被设置为和字体大小一致,而span等标签的下边缘会和字体的基线对齐,故需设置一个往下的偏移比例,来纠正视觉上的未对齐效果 */
fill: currentColor;
/* 定义元素的颜色,currentColor是一个变量,这个变量的值就表示当前元素的color值,如果当前元素未设置color值,则从父元素继承 */
overflow: hidden;
}
</style>
三、在main.ts全局注册组件
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import { store, key } from '@/store'
import 'virtual:svg-icons-register' // 引入注册脚本
import SvgIcon from '@/components/svgIcon/index.vue' // 引入组件
const app = createApp(App)
app.component('svg-icon', SvgIcon)
app.use(router).use(store, key).mount('#app')
四、vite.config.ts 中的配置插件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from "path"
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs:[path.resolve(process.cwd(),'src/assets/icons')],
// 指定symbolld格式
symbolId: 'icon-[dir]-[name]'
})
],
})
五、在页面中使用
<svg-icon name="del" className="my" color="green" />
name为svg文件名称,比如调用 del.svg,这里name就为del,className则为样式调用,这里的my的样式可以写在调用该组件的页面中,color控制颜色
六、在后台管理页面中,控制svg图标显示
在后台管理中,有的菜单需要不同的图标,但是在项目中是统一循环出来的,不好一个一个手动设定,比如这样的
不同的菜单不同的图标,这个时候可以在添加菜单的时候,加上一个字段button名称字段,填写svg名称,在调用菜单的时候,返回这个字段,然后在<svg-icon name="del" className="my" color="green" />中调用
<a-sub-menu :key="menuInfo.name" v-if="!menuInfo.hidden">
<template #icon v-if="menuInfo.meta" >
<svg-icon v-if="menuInfo.meta.icon" :name="menuInfo.meta.icon" className="menuIcon" />
<svg-icon v-else name="type" className="menuIcon" />
</template>
<template #title>{{ menuInfo.meta.title || menuInfo.title }}</template>
<template v-for="item1 in menuInfo.children" :key="'nav' + item1.name" >
<nav-menu :menu-info="item1" />
</template>
</a-sub-menu>
这里就是项目中的部分代码,svg的name就是调用的后台传过来的值,通过这个值来显示不同的图标
更多推荐
所有评论(0)