在vue项目中封装svg

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情

SVG —— 可缩放矢量图形（Scalable Vector Graphics）

SVG

SVG 使用 XML 格式定义图像，打开一个矩形图像的 svg 文件，代码以 <svg> 作为外层标签,具体形式是这样的：

一般情况下使用 SVG 是因为它有如下特点：

• SVG 图像改变尺寸的情况下图形质量不会有所损失（在图像质量不下降的情况下被放大）
• 在项目中易于维护，比普通的图片类型的大小要小
• 对 SEO 友好

那么在 Vue 项目中如何使用 svg 呢？

安装

安装 svg-sprite-loader依赖

npm i -D svg-sprite-loader

组件化

接下来将 svg 相关的实现封装到组件中。新建一个 SvgIcon 文件夹,里面包含的目录结构：

• SvgIcon
  • svg // 存放 .svg 文件
    • a.svg
    • b.svg
  • index.ts // 引入所有的 svg 文件
  • index.vue // 封装 svg 代码

index.vue:

使用svg 标签，并进行样式设置

    <svg :class="svgClass" v-bind="$attrs">
        <use :xlink:href="iconName"/>
    </svg>


  <style lang="scss" scoped>
    .svg-icon {
      width: 1.2em;
      height: 1.2em;
      vertical-align: middle;
    }
  </style>

可以对svg图表组件的类名等进行自定义，比如加上svg-前缀：

props: {
    name: {
      type: String,
      required: true
    }
  },
  setup(props) {
    let iconName = computed(() => `#icon-${props.name}`);
    let svgClass = computed(() => {
        return props.name ? `svg-icon icon-${props.name}` : "svg-icon";
    });
    return { iconName, svgClass };
  }

index.ts

require.context() :参数1：svg文件路径，参数2：是否检索子目录，参数3：匹配文件的正则表达式

const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context("./svg", false, /.svg$/);
requireAll(req);

最终在页面中可看到：

使用

1. vue.config.js 中还需要配置一下 chainWebpack：

里面的路径为前面 svg 文件存放的路径

2. 在 main.js 全局引用，之后就可以在项目的任意页面使用

import svgIcon from '@/组件路径';
createApp(App).component('svg-icon',svgIcon)

3. 使用 name 属性值为 svg 文件夹中存放的文件名称

<svg-icon name="a" />

运行结果：