如何使用Svg矢量图封装引用到vue3项目中

前言

在现代前端开发中，SVG（可缩放矢量图形）因其高质量和灵活性成为了图标和图形设计的热门选择。对于 Vue 3 项目而言，将 SVG 图标封装和引用到项目中不仅能提升性能，还能带来更高的可维护性和一致性。SVG 图标本质上是矢量图形，因此无论放大还是缩小，图像都不会失真，这使得它们在响应式设计中表现尤为出色。此外，通过封装 SVG 图标，可以将图标的样式和行为与组件紧密结合，简化管理和重用的过程。这种做法不仅优化了开发流程，也提升了用户体验。接下来，我们将探讨如何在 Vue 3 项目中有效地封装和引用 SVG 图标，帮助你充分发挥它们的优势。

一、如何在线使用svg图标

1、打开iconfont素材网站，集成 svg 图标

iconfont素材网站

icomoon素材网站

• 创建 iconfont 项目
• 找到合适的 svg 图标
• 添加购物车到项目中

2、本地上传svg图标

• 挑选 svg 图标下载
• 打开iconfont上传 svg 图标
• 上传的svg图标添加至iconfont 项目

3、symbol 引用

官方帮助文档：查看，推荐使用 symbol 方式

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+,及现代浏览器。
• 浏览器渲染svg的性能一般，还不如png。

1. 第一步：拷贝项目下面生成的symbol代码：

<script src="//at.alicdn.com/t/c/font_4546577_a2gvbkwn7z.js"></script>

2. 第二步：加入通用css代码（引入一次就行:

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

3. 第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

4、封装 svg 组件

1. 外部引用 symbol 链接

2. 接收 icon name

在vue3项目public/index.html中引入symbol 链接

<script src="//at.alicdn.com/t/c/font_4546577_a2gvbkwn7z.js"></script>

3. icon 外层样式封装

创建src/components/Icon.vue

<template>
  <div class="icon-wrapper" :style="{ ...style }">
    <svg class="icon">
      <use :href="iconName"></use>
    </svg>
  </div>
</template>

<script setup>
import { computed, defineProps } from "vue";

const props = defineProps({
  name: String,
  prefix: {
    type: String,
    default: "icon-",
  },
  style: Object,
});

const iconName = computed(() => `#${props.prefix}${props.name}`);
</script>

<style lang="scss" scoped>
.icon {
  width: 100%;
  height: 100%;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon-wrapper {
  display: inline-block;
}
</style>

4. 引用Svg组件

<template>
  <div class="wrapper">
    <i-icon name="vuejs_icon" />
  </div>
</template>

<script setup>
import IIcon from "@/components/Icon.vue";
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100%;
}
</style>

二、如何直接使用外部、内部的svg图标

• 显示外部svg图标
• 显示内部svg图标

1、封装svg图标组件

新建src/components/SvgIcon/index.vue

<template>
  <div
    v-if="isExternal"
    :style="styleExternalIcon"
    class="svg-external-icon svg-icon"
    :class="className"
  />
  <!-- 即使 aria-hidden="true" 可以阻止内容被辅助技术读取，它并不会影响内容的视觉显示。因此，您可能需要使用CSS来隐藏这些元素（如果适用）。但是，请注意，仅仅使用CSS隐藏元素并不足以确保它们对辅助技术用户是不可见的。 -->
  <svg v-else class="svg-icon" :class="className" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup>
// 避免重名，将 external当做isExternal来使用
import { isExternal as external } from '@/utils/validate'
import { defineProps, computed } from 'vue'
// defineProps接受父组件传入的对象
const props = defineProps({
  // icon 图标
  icon: {
    type: String,
    required: true
  },
  // 图标类名
  className: {
    type: String,
    default: ''
  }
})

/**
 * 判断是否为外部图标
 */
const isExternal = computed(() => external(props.icon))
/**
 * 外部图标样式
 */
/**
 * mask: 是一个 CSS 属性，用于将图像用作元素的遮罩。遮罩定义了
 * 哪些部分应该显示（图像的白色或透明部分），哪些部分应该隐藏
 * （图像的黑色部分）。no-repeat 50% 50% 表示图像不会重复，并且会居中放置。
 */
const styleExternalIcon = computed(() => ({
  mask: `url(${props.icon}) no-repeat 50% 50%`,
  '-webkit-mask': `url(${props.icon}) no-repeat 50% 50%`
}))
/**
 * 项目内图标
 */
const iconName = computed(() => `#icon-${props.icon}`)
</script>

<style scoped>
.svg-icon {
  width: 100%;
  height: 100%;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>

2、判断是否为外部图标

新建src/utils/validate.js

/**
 * 判断是否为外部资源
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}
/**
 * return /^(https?:|mailto:|tel:)/.test(path)：这行代码是函数的
 * 主体，它返回一个布尔值。这里使用了正则表达式
 * ^(https?:|mailto:|tel:) 来检查 path 字符串是否以 http:、https:、mailto: 或 tel: 开头。
 */

3、通过组件来显示外部svg图标

新建src/

<template>
  <div class="wrapper">
    <span class="svg-container">
      <svg-icon
        icon="http://118.178.232.152:8001/#icon-vuejs_icon"
      />
    </span>
  </div>
</template>

<script setup>
import SvgIcon from "@/components/SvgIcon/index.vue";
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100%;
}
.svg-container {
  vertical-align: middle;
  display: inline-block;
  width: 80px;
  height: 80px;
}
</style>

请求外部图标时可能会遇到跨域问题,所以尽量下载到本地项目中进行使用

4、内部引用svg图标

收集待使用的svg图标，下载放置项目的src/icons/svg/的文件夹中,如放入一个vuejs_icon.svg图标

5、完成导入所有的svg图标

src/icons/index.js

// 导入所有的svg图标
import SvgIcon from '@/components/SvgIcon'
// https://webpack.docschina.org/guides/dependency-management/#requirecontext
// 通过 require.context() 函数来创建自己的 context
// 给这个函数传入三个参数：要搜索的目录、是否还搜索其子目录，匹配文件的正则表达式。
const svgRequire = require.context('./svg', false, /\.svg$/)
// 此时返回一个 require 的函数，可以接受一个 request 的参数，用于 require 的导入。
// 该函数提供了三个属性，可以通过 require.keys() 获取到所有的 svg 图标
// 遍历图标，把图标作为 request 传入到 require 导入函数中，完成本地 svg 图标的导入
svgRequire.keys().forEach((svgIcon) => svgRequire(svgIcon))
// console.log(svgRequire.keys(), 'svgRequire')
// 导入所有的svg图标
// console.log(svgRequire('./user.svg'), 'svgIcon')

// 完成svgicon的全局注册
export default (app) => {
  app.component('svg-icon', SvgIcon)
}

6、全局导入SvgIcon

src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 导入 svgIcon
import installIcons from "@/icons";

const app = createApp(App);
installIcons(app);
app.use(store).use(router).mount("#app");

7、通过组件来显示内部svg图标

<template>
  <div class="wrapper">
    <span class="svg-container">
      <svg-icon icon="vuejs_icon" />
    </span>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100%;
}
.svg-container {
  vertical-align: middle;
  display: inline-block;
  width: 80px;
  height: 80px;
}
</style>

8、直接复制使用svg代码(不推荐使用)