SVG图标配置

在开发项目时，确实经常使用 SVG（Scalable Vector Graphics）矢量图，因为它们具有许多优点。以下是使用 SVG 的主要好处：

1. 可伸缩性：SVG 图形可以在任何尺寸下保持高质量，不会像位图图像那样失真。这意味着无论屏幕大小或分辨率如何变化，SVG 图形都能保持清晰度。

2. 小文件大小：相比于传统的位图格式（如 PNG 或 JPEG），SVG 文件通常较小，因此在网页上加载更快，节省带宽。

3. 可编辑性：SVG 图形是基于 XML 的，所以可以使用文本编辑器进行编辑，也可以使用 CSS 或 JavaScript 动态改变颜色、大小和样式。

4. SEO 友好：搜索引擎更容易索引 SVG 图片，因为它们是文本格式。

5. 可交互性：SVG 支持动画和交互式图形，使设计更具吸引力。

6. 无障碍性：SVG 图形可以为视觉障碍用户提供更好的体验，因为它们可以与辅助技术一起工作

安装SVG依赖插件

npm install vite-plugin-svg-icons

 在 vite.config.ts 中配置插件

// 引入svg要用到的插件
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [fileURLToPath(new URL('./src/assets/icons', import.meta.url))],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]'
    })
  ],
}}

入口文件导入

import 'virtual:svg-icons-register'

 svg封装

创建一个 src\components\SvgIcon\index.vue 的文件

<template>
    <!-- 测试svg图标使用 -->
    <!-- svg:图标外层容器节点，内部需要与use标签结合使用 -->
    <svg :style="{ width, height }">
        <!-- xlink:href执行用哪一个图标, 属性值务必#icon-图标名字 -->
        <!-- use标签fill属性可以设置图标的颜色 -->
        <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
</template>

<script setup lang="ts">
defineProps({
    // 图标前缀
    prefix: {
        type: String,
        default: '#icon-'
    },
    // 提供图标的名字
    name: String,
    // 图标颜色
    color: String,
    // 图标大小
    width: {
        type: String,
        default: '16px'
    },
    height: {
        type: String,
        default: '16px'
    }
})
</script>

<style scoped></style>

使用方式 

<template>
    <div>
        <h1>测试组件</h1>
        <svg-icon name="delete" color="pink"></svg-icon>
    </div>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
</script>

<style scoped>

</style>

效果如下：

 

svg组件注册为全局组件

在 main.ts 中引入

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
// 引入element-plus插件与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 配置element-plus中文
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ElementPlus, {
    locale: zhCn,
})
// svg插件配置需要代码
import 'virtual:svg-icons-register'

import SvgIcon from '@/components/SvgIcon/index.vue'
app.component('SvgIcon', SvgIcon)
// 将应用挂载
app.mount('#app')