vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇

本文链接：https://blog.youkuaiyun.com/youyacoder/article/details/127166264

本文详细介绍了如何在Vue3和Vite2环境下封装SVG图标组件，支持在线和本地SVG图标。首先在src/components/svg-icon创建组件，设定输入属性icon和className。接着实现在线SVG图标功能，通过div元素结合mask属性展示图标。然后配置vite-plugin-svg-icons处理本地SVG资源，修改main.ts并完成svg-icon组件。最后，通过测试证明在线图标和本地图标都能正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在《基于 vite 创建 vue3 全家桶》一文整合了 Element Plus，并将 Element Plus 中提供的图标进行全局注册，这样可以很方便的延续 Element UI 的风格 —— 通过 el-icon-xxx 的方式使用图标（如果有问题的朋友可以先阅读前面的文章：基于 Vite 创建 vue3 全家桶项目）。

在真实的企业级开发中，Element Plus 内置的图标通常很难满足业务需求，项目中需要引入大量的 SVG 图标资源，本文描述如何在 Vue3 + Vite2 环境中使用 SVG 图标，封装一个支持本地 SVG 图标和在线 SVG 图标的组件 svg-icon。

文中实现的 svg-icon 组件会内置到 yyg-cli 脚手架中（通过 yyg 命令行创建的项目内置该组件），如果在此之前已经通过 yyg-cli 创建了项目，可以按照本文的步骤封装 SVG 图标组件 svg-icon 。

1 创建组件

在 src/components/ 目录下创建目录 svg-icon，该在目录中创建 svg-icon 组件 index.vue。

1.1 输入属性

该组件需要两个输入属性（props）：

icon：SVG 图标的名称或在线 URL
className：动态传递给该组件的样式类名

代码如下：

const props = defineProps({
   
  // SVG 图标名称或在线URL
  icon: {
   
    type: String,
    required: true
  },
  // 图标类名
  className: {
   
    type: String,
    default: ''
  }
})

1.2 SVG 图标样式

在 style 中定义 svg-icon 的样式类：

.svg-icon {
   
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}

2 在线 SVG 图标

svg-icon 组件需要支持在线 SVG 图标和本地 SVG 图标。首先实现在线 SVG 图标的显示。如下 URL 为一个在线 SVG 图标，可在浏览器中直接访问：

http://www.yygnb.com/demo/car.svg

2.1 判断在线图标

在 script 中通过计算属性判断 props 中的 icon 是否是在线图标：

const isOnlineSvg = computed(() => /^(https?:)/.test(props.icon))

该判断比较简单，如果 icon 属性以 http: 或 https: 开头，则该图标为在线图标，其他情况均为本地的 SVG 图标。各位朋友可以根据自己项目情况添加或完善该判断逻辑。

2.2 模板和样式

在线 SVG 图标通过 HTML 元素 div 来显示，css3 有个 mask 属性，该属性表示遮罩，可以部分或者完全隐藏一个元素的可见区域，使用方式与 background 很类似。

template 如下：

<div v-if="isOnlineSvg"
     :style="{