安装vite-plugin-svg-icons-Toy模板网

这篇具有很好参考价值的文章主要介绍了安装vite-plugin-svg-icons。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

找不到合适的图标，如何使用其他的svg图标？
安装vite-plugin-svg-icons
使用svg-icon，即可使用iconfont等svg图标库

一、安装依赖

npm i vite-plugin-svg-icons

npm i fast-glob

二、在src/assets新建svg目录

安装vite-plugin-svg-icons,从0到1：通用后台管理系统,javascript,前端,vue3,svgicon,前端小王hs

三、vite.config.js中进行配置

import {
	createSvgIconsPlugin
} from 'vite-plugin-svg-icons'

// 在plugins中添加
		createSvgIconsPlugin({
			iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
			symbolId: 'icon-[dir]-[name]',
		}),

四、在main.js中导入文件

// 导入svg图标
import 'virtual:svg-icons-register'

五、在components文件中创建SvgIcon.vue文件封装svg组件

<template>
    <svg aria-hidden="true" :style="{ width: size + 'px', height: size + 'px' }">
        <use :xlink:href="symbolId" :fill="color" />
    </svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
    iconName: {
        type: String,
        required: true
    },
    color: {
        type: String,
        default: ''
    },
    size: {
        type: [Number, String],
        default: 18
    }
})
const symbolId = computed(() => `#icon-${props.iconName}`);

</script>


<style scoped>
.svg-icon {
    fill: currentColor;
    vertical-align: middle;
}
</style>

六、最后在需要的文件中使用图标
示例在面包屑组件中引用
安装vite-plugin-svg-icons,从0到1：通用后台管理系统,javascript,前端,vue3,svgicon,前端小王hs 文章来源地址https://www.toymoban.com/news/detail-620212.html

<template>
	<div class="bread-crumb">
		<SvgIcon icon-name="location" class="bread-crumb-icon"></SvgIcon>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item>{{props.item.first}}</el-breadcrumb-item>
			<el-breadcrumb-item v-if="props.item.second">{{props.item.second}}</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
</template>

<script setup>
	import SvgIcon from '@/components/SvgIcon.vue'
	const props = defineProps(["item"])
</script>