什么是Svg？

SVG（Scalable Vector Graphics）是一种基于可扩展标记语言（XML）的开放标准矢量图形格式。它用于描述二维矢量图形，并且可以嵌入到HTML和XML文档中。SVG文件可以通过文本格式的描述性语言来描述图像内容，因此它是一种和图像分辨率无关的矢量图形格式。

SVG图形格式具有许多优点。首先，图像文件可读，易于修改和编辑。其次，它与现有技术可以互动融合，例如SVG技术本身的动态部分是基于SMIL标准。此外，SVG文件非常轻巧，这意味着它们可以很快地加载，即使是在网络上。最后，SVG可以支持多种效果，如渐变、阴影和反射等，这些效果不可能用位图完成。

Svg格式图片和其他格式图片有什么区别呢？

SVG图片和常见的位图图片（如JPEG和PNG）有很大的区别。位图图片是由许多像素点组成的，而矢量图形是由数学公式定义的。这使得矢量图形可以在不损失质量的情况下进行任意缩放，而位图图片在放大时则会变得模糊。

为什么我们要将其封装成一个单独的组件？

可缩放性：SvgIcon组件可以利用SVG的特性，使得图标可以在不失真的情况下进行缩放。这对于需要根据用户需求动态调整大小或者需要在不同分辨率下都能清晰显示的图标来说非常有用。
可编辑性：由于SVG图标是由XML代码定义的，因此可以方便地进行修改和编辑。这在需要定制图标或者图标需要经常变动的情况下非常方便。
支持复杂交互：SVG图标可以支持鼠标事件（如点击、悬停等），这使得可以在图标上实现一些复杂的交互功能。

SvgIcon组件在Vue中用于专门展示SVG图标，可以充分利用SVG的优点，使得图标的显示和交互都能得到更好的支持。

封装过程

我们借助插件实现SvgIcon组件的封装，具体步骤如下：

安装插件：yarn add -D vite-plugin-svg-icons
配置vite.config.js（vite.config.ts）配置文件，导入，并将其插件配置到plugins数组当中

js 复制代码

// SvgIcon组件封装插件引入
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
  // 其他配置...
  plugins: [
      createSvgIconsPlugin({
          // 指定需要缓存的图标文件夹
          iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
          // 指定symbolId格式
          symbolId: 'icon-[dir]-[name]'
      })
  ]
})

新建SvgIcon组件

vue 复制代码

<template>
  <!--svg外层容器，需要配置子元素use使用-->
  <svg :style="{width, height}">
    <!--xlink:href引用的svg图标，#icon-图标名-->
    <use :xlink:href="symbolId" :fill="fill" />
  </svg>
</template>

<script setup>
import {computed} from "vue"
const props = defineProps({
  prefix: {
    type: String,
    default: 'icon'
  },
  name: {
    type: String,
    required: true
  },
  width: {
    type: String,
    default: "16px"
  },
  height: {
    type: String,
    default: "16px"
  },
  fill: {
    type: String,
    default: '#333'
  }
})
// svg icon引入的格式
const symbolId = computed(() => {
  return `#${props.prefix}-${props.name}`
})
</script>

配置main.js(main.ts)，在其中新增一行注册svg图标注册

js 复制代码

// svg图标注册
import 'virtual:svg-icons-register'

使用，在使用的组件中导入svgIcon，然后指定其属性name（表示svg图片名称，需要与svg文件名去除后缀一致）

js 复制代码

<template>
  <svg-icon name="sun" fill="red"/>
</template>

<script setup>
import svgIcon from '@/components/svgIcon/index.vue'
</script>

上述name必须指定sun，然后插件会根据 $dir$ - $name$ 去找到对应目录的svg图片

Vite创建的Vue3项目中封装SvgIcon组件

什么是Svg？

Svg格式图片和其他格式图片有什么区别呢？

为什么我们要将其封装成一个单独的组件？

封装过程

推荐一个Svg图标库