我们在项目中经常会使用到svg,这里对svg进行封装,以方便后续的使用。
1.安装svg插件
npm i vite-plugin-svg-icons
2.在vite.config.ts中引入,用来指定svg存放位置
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"; import { resolve } from "path"; const plugins = [ createSvgIconsPlugin({ iconDirs: [resolve(process.cwd(), 'src/assets/svgs')] }) ];
这里指定的svg存放位置为src下的assets下的svgs文件夹。
3.封装svg组件
<template> <svg > <use :xlink:href="symbolId" :fill="color"/> </svg> </template> <script setup lang="ts"> import {computed} from 'vue'; /*** * prefix svg前置图标 * iconClass svg类名 必传 * color 修改svg颜⾊ */ const props = defineProps({ prefix: {type: String, default: 'icon',}, iconClass: {type: String, required: true,}, color: {type: String, default: '#fff'} }) const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`); </script> <style scoped> </style>
4.在main.ts中进行注册,方便全局使用
import "virtual:svg-icons-register" //svg组件 import SvgIcon from './components/svg/index.vue' //注册到全局 app.component('svg-icon', SvgIcon)
这一步实际上在我们使用业务的时候会很繁琐,我们需要针对不同的组件进行各种全局注册,这个在后面我将进行自动化封装来解决这个问题。
5.使用
assets/svgs下文件
---svg1.svg
---aa/svg2.svg
组件中使用
<svg-icon iconClass="svg1"></svg-icon> <svg-icon iconClass="aa-svg2"></svg-icon>
上述例子,主要是为了说明,可以使用文件夹形式存放,只要在指定文件夹下,建立多级目录也是不影响使用的。
标签:vue,封装,svg,使用,组件,import From: https://www.cnblogs.com/lisir-blogshare/p/17967899