封装SVG组件

下面是在vue3的项目中实现封装SVG组件

什么是SVG？

SVG (Scalable Vector Graphics) 是一种基于 XML 的矢量图形格式，用于描述二维图形和图像。与传统的栅格图像（如 JPEG、PNG）不同，SVG 使用数学公式来定义图形，因此可以无损地进行缩放和放大，并保持图像的清晰度和质量。

以下是一些关于 SVG 的特点和用途：

1. 矢量图形：SVG 使用几何形状、路径和文本对象来描述图形。这些对象可以通过调整大小、平移和变换等操作进行精确控制，而不会像栅格图像一样失真。
2. 可伸缩性：SVG 图形可以根据需要进行任意大小的缩放，而不会损失图像的清晰度。这使得 SVG 在不同的设备分辨率和屏幕尺寸下都能保持良好的呈现效果。
3. 文本支持：除了图形，SVG 还支持添加文本元素，可以在图形中嵌入文本内容，比如标题、标签、图例等。
4. 动画和交互性：SVG 支持通过 CSS、JavaScript 或 SMIL（Synchronized Multimedia Integration Language）实现动画效果和交互特性。可以使用这些技术为 SVG 图形添加动态效果、响应用户操作和实现无缝的用户体验。
5. Web 标准：SVG 是 Web 标准之一，被广泛支持和应用于各种 Web 技术中，包括网页设计、图标制作、数据可视化和交互式图形。

SVG 图像可以在各种图像编辑器（如 Adobe Illustrator、Inkscape）中创建和编辑，并嵌入到 HTML 文件中进行展示。通过 CSS 和 JavaScript，SVG 图像可以与网页的其他元素和样式进行集成和调整。

项目是基于vite创建的才可以按照下面步骤操作

安装插件

安装vite-plugin-svg-icons

yarn add vite-plugin-svg-icons -D 
# or 
npm i vite-plugin-svg-icons -D 
# or 
pnpm add vite-plugin-svg-icons -D

这是Chat-GPT对这个插件的解释：

vite-plugin-svg-icons 是一个为 Vite 构建工具设计的插件，它的主要功能是自动将 SVG 图标转换为 Vue 组件，并在构建过程中进行优化和导入。这个插件在前端项目中使用的主要目的是简化 SVG 图标的使用和管理。

具体来说，vite-plugin-svg-icons 提供了以下功能：

1. 自动转换：当你将 SVG 文件放置在指定目录下时，插件会自动将它们转换为可用的 Vue 组件。你无需手动处理 SVG 文件转换的步骤，这样可以节省开发时间。
2. 自动导入：一旦 SVG 文件被转换为 Vue 组件，它们会被自动导入到你的项目中。你只需要在代码中使用这些组件即可，无需手动导入每个 SVG 文件。
3. 优化输出：插件会对 SVG 图标进行优化，包括移除冗余信息、压缩文件大小等。这样可以减少加载时间，并改善性能。

使用 vite-plugin-svg-icons 可以使你的项目更加方便地管理和使用 SVG 图标，同时也提供了一些优化的特性，让你的应用在加载和渲染 SVG 图标时更加高效。

在vite环境下配置

在vite.config.js(ts)文件中添加配置项

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

export default defineConfig({ 
    plugins: [
        createSvgIconsPlugin({
        // 指定图标文件夹，绝对路径（NODE代码）
        // svg图标文件需要存放在scr/icons文件夹内，可以自定义修改
        iconDirs: [path.resolve(process.cwd(), 'src/icons')]
    })
    ] 
})

解释一下iconDirs: [path.resolve(process.cwd(), 'src/icons')]

这行代码是对 vite-plugin-svg-icons 插件的配置，用于指定 SVG 图标的目录。

具体解释如下：

• iconDirs 是一个数组，用于指定要扫描的 SVG 图标目录。每个目录都是一个字符串，可以是相对于项目根目录的相对路径，或者是一个绝对路径。
• process.cwd() 是 Node.js 中的一个方法，用于获取当前工作目录的绝对路径。
• path.resolve() 是 Node.js 中的一个方法，用于解析路径。它接受一个或多个路径片段作为参数，将它们连接成一个绝对路径。
• 'src/icons' 是一个相对路径片段，指定了位于项目根目录下的 src/icons 目录。

综合起来，iconDirs: [path.resolve(process.cwd(), 'src/icons')] 的意思是，插件会扫描项目根目录下的 src/icons 目录中的所有 SVG 图标文件，并将它们转换为 Vue 组件。

如果你希望配置多个 SVG 图标目录，只需修改 iconDirs 数组，加入其他目录的路径即可。

在main.js(ts)文件进行全局引入

import 'virtual:svg-icons-register'

这样就可以使用了

<svg aria-hidden="true"> 
    <!-- #icon-文件夹名称-图片名称 --> 
    <use href="#icon-login-eye-off" /> 
</svg>

其中use中的 href属性的书写样式是固定的

封装SVG组件

下面代码是封装svg的完整代码，可以直接cv

<script setup lang="ts">
// 提供name属性即可
defineProps<{
  name: string
}>()
</script>

<template>
  <svg aria-hidden="true" class="cp-icon">
    <use :href="https://juejin.cn/post/`" />
  </svg>
</template>

<style lang="scss" scoped>
.cp-icon {
  // 和字体一样大
  width: 1em;
  height: 1em;
}
</style>

如果你的项目中使用了ts文件，我们可以给这个组件添加类型标注声明一个跟组件同名的.s.ts文件

// 引入你封装的文件
import CpIcon from '@/components/CpIcon.vue'

declare module 'vue' {
//固定写法
  interface GlobalComponents {
    CpIcon: typeof CpIcon 
  }
}

这样组件就封装好了，可以引入组件后使用

使用组件的时候需要我们传递一个name属性，属性是由svg的文件夹和名字组成

<cp-icon name="consult-alipay"></cp-icon>

这篇好文章是转载于：学新通技术网