![cover](https://img-blog.csdnimg.cn/img_convert/a7b426f027554ddcbce196b962043da2.png)
vite2.0-vue3如何快速实现svg图标
由于vite的svg无法兼容vue2的版本,只能重新找如何实现,结果找了很久没有几个文章有用的要么打包警告,要么就是无法实现直接报错的,终于找到了官方文档是使用另一个插件实现的vite-plugin-svg-icons:官网文档具体实现:yarn add vite-plugin-svg-icons -D或者npm i vite-plugin-svg-icons -D配置插件 vite.config
·
由于vite的svg无法兼容vue2的版本,只能重新找如何实现,结果找了很久没有几个文章有用的要么打包警告,要么就是无法实现直接报错的,终于找到了官方文档是使用另一个插件实现的vite-plugin-svg-icons
:官网文档
真实案例使用后台admin
具体实现:
yarn add vite-plugin-svg-icons -D
或者
npm i vite-plugin-svg-icons -D
配置插件 vite.config.js / vite.config.ts
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path'; // ts如果报错 npm i @types/node -D
export default () => {
return {
plugins: [
createSvgIconsPlugin({
// 配置路劲在你的src里的svg存放文件
iconDirs: [path.resolve(process.cwd(), 'src/icons')],
symbolId: 'icon-[dir]-[name]',
}),
],
};
};
存放文件路劲 /src/icons
# src/icons
- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg
然后就在main.js / main.ts 加入否则报错
import 'virtual:svg-icons-register';
// 需要全局引入再添加
import svgIcon from './components/SvgIcon/index.vue' // 全局svg图标组件
app.component('svg-icon', svgIcon)
SvgIcon组件实现
<template>
<svg
:class="['svg-icon', $attrs.class]"
:style="{
width: iconSize + 'px',
height: iconSize + 'px',
}"
aria-hidden="true"
>
<use :xlink:href="'#icon-' + iconName" :fill="color" />
</svg>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'SvgIcon',
props: {
iconName: {
type: String,
required: true,
},
color: {
type: String,
default: '',
},
iconSize: {
type: [Number, String],
default: 14,
},
},
setup() {
return {};
},
});
</script>
<style scope>
.svg-icon {
fill: currentColor;
vertical-align: middle;
}
</style>
使用方法和以前一样
<template>
<div>
<svg-icon icon-name="icon1" class='class' color='red' icon-size="14" />
</div>
</template>
<script>
import { defineComponent, computed } from 'vue';
import SvgIcon from './components/SvgIcon.vue';
export default defineComponent({
name: 'App',
components: { SvgIcon },
});
</script>
经过一些反馈发现有部分人无法改变icon颜色的问题解决方案
在svg文件内部源码找到fill
= 此关键字移除
或者像element-plus-icon一样设置成fill="currentColor"
更多推荐
所有评论(0)