Vue中使用SVG图标的步骤【钢镚核恒】

最新推荐文章于 2023-08-17 14:45:23 发布

「已注销」

最新推荐文章于 2023-08-17 14:45:23 发布

阅读量360

点赞数

分类专栏： Vue 文章标签： vue svg

本文链接：https://blog.csdn.net/weixin_42242074/article/details/118879036

版权

本文介绍了在Vue项目中如何使用SVG图标，包括SVG的优势、如何通过svgo压缩SVG、借助svg-sprite-loader创建雪碧图，以及详细步骤：添加依赖、创建SVG组件、配置svgo和vue.config.js，最后说明SVG图标存放位置。

摘要由CSDN通过智能技术生成

Vue中使用SVG图标的步骤

简介

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

svg 优势：任意缩放，超强显示效果，较小文件，可压缩

svgo 用来压缩svg中无用信息

svg-sprite-loader 将加载的 svg 图片拼接成雪碧图，在其他地方通过引用

在了解这些概念后，就上路吧！这里概念排很少，大家可以到其他地方扩充知识~

上路

添加依赖
```
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.0"
```
方法一：复制到 package.json，执行 npm i

方法二：直接安装npm i svg-sprite-loader svgo --save-dev

添加 svg 组件（创建components/SvgIcon/index.vue）

<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :href="iconName" />
  </svg>
</template>

<script>
// 使用SvgIcon的文档: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    isExternal() {
      // 过滤网络链接，如果不是网络的资源会走向本地的svg
      return /^(https?:|mailto:|tel:)/.test(this.iconClass)
    },
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}
</script>

&