如何在VUE项目中引入SVG图标

HelloWorldZ

发布于 2024-03-20 10:37:05

1.2K00

代码可运行

文章被收录于专栏：前端开发前端开发

运行总次数：0

代码可运行

前言

SVG（即“可缩放矢量图形”）图标在诸多场合下，往往胜过一般的位图标记（例如PNG、JPG、GIF等）。

体积微：SVG乃矢量图像格式，以一连串数学函数及坐标点来描绘图像，使得SVG文件体积往往甚于位图更小。
可无穷缩放：由于SVG为矢量图，故可在图像质量不损失的环境下进行无限缩放，此对于开发高DPI（即“屏幕像素密度”）显示装置，例如Retina屏的网页应用，大有裨益。
易于更改：SVG另一优点在于，其实为基于XML，故可方便地由CSS及Javascript进行更改及操作。
应用广泛：除图标外，SVG亦常用于复杂的图表、插图、动画等。

然而，SVG并非在所有情形下皆为最佳选择。对于一些复杂度较高及色彩丰富的图像，例如照片，使用位图可能更为恰当。因此，在每个具体的项目中，皆需依据实际需求而决定使用何者。

具体过程

一. 安装

npm i svg-sprite-loader --save

二. 在components文件夹中，建新文件夹曰SvgIcon，再于文件夹下建新文件，名之曰index.vue。

为index.vue撰写代码

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
      <use :xlink:href="iconName" />
  </svg>
</template>
<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    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>
<style scoped>
  .svg-icon {
      width: 1.5em;
      height: 1.5em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
  }
  .svg-external-icon {
      background-color: currentColor;
      mask-size: cover!important;
      display: inline-block;
  }
</style>

此乃一Vue组件，名为SvgIcon，其功能为展示SVG图标。其成立之目的，正是为了使吾等在项目中使用 SVG 图标时能变得更为便捷。

name: 'SvgIcon'

此组件接受两属性，名若iconClass及className。依iconClass之值，此组件能展示各异之图标。className 则为 CSS 类名，用以定制 SVG 图标之样式。

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
      <use :xlink:href="iconName" />
  </svg>
</template>

  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  }

  computed: {
    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%`
      }
    }
  }

iconClass 属性决定所欲展示之 SVG 图标；例若 iconClass 之值为 logo，则显示名为 logo 之 SVG 图标矣。

className 属性用以定制 SVG 图标之样式；className 之值，将被加至图标的 CSS 类名中，使得吾等可于外部定义及施用 CSS 样式也。凡 SVG 图标均用 svg-icon 类设定基本样式，如需定制样式，可通过 className 属性传入自定之类名。

在计算属性iconName中，吾等将 iconClass 添以 #icon- 前缀，然后赋值于 SVG 的 use 元素的 xlink:href 属性。在 SVG 中，use 元素用以赋值及渲染其他元素，而 xlink:href 属性则定义了所赋值之元素。

  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    }
  }

此组件亦提供了计算属性styleExternalIcon，可实现一种遮罩效果。

  computed: {
    styleExternalIcon () {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }

于CSS样式中，吾使用了scoped，意为此些样式仅对当前组件生效，不会对其他组件产生干扰，此法精巧绝伦。

<style scoped>
  .svg-icon {
      width: 1.5em;
      height: 1.5em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
  }
  .svg-external-icon {
      background-color: currentColor;
      mask-size: cover!important;
      display: inline-block;
  }
</style>

三. 在 src 目录下新设一 icons 目录，于 icons 目录中再设一 index.js 文档

于 index.js 文件内撰写诸代码

// 导入 Vue 框架
import Vue from 'vue'
// 导入 SvgIcon 组件
import SvgIcon from '@/components/SvgIcon'

// 将 SvgIcon 组件注册为全局组件
Vue.component('svg-icon', SvgIcon)

// 定义一个函数，用于引入所有 svg 文件
const requireAll = requireContext => requireContext.keys().map(requireContext)
// 定义一个上下文，只包含 './svg' 目录下的以 '.svg' 结尾的文件
const req = require.context('./svg', false, /\.svg$/)
// 引入 svg 文件
requireAll(req)

svg 目录储各种异式之 svg 文档，可直接于 iconfont 官网抄录 iconfont-阿里巴巴 之矢量图标库也。

五. 于svg目录下，依使用所需，引入icon之svg代码片段

logo.svg

<svg
t="1703984189839"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2519"
width="128"
height="128">
<path
d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0z m87.552 185.173333c-55.296 18.261333-81.92 69.802667-65.962667 128.341334l5.717334 21.589333c-11.946667 2.56-23.722667 5.973333-35.157334 10.410667-54.016 20.821333-96.853333 66.986667-111.872 120.576a163.925333 163.925333 0 0 0-5.461333 58.709333 147.114667 147.114667 0 0 0 61.44 107.264 129.621333 129.621333 0 0 0 110.08 18.773333c26.965333-7.338667 50.858667-23.296 67.925333-45.397333 26.453333-34.389333 34.218667-79.701333 22.186667-127.488-4.437333-17.322667-9.984-36.693333-15.36-55.296l-5.717333-20.309333c22.869333 5.717333 43.946667 17.066667 61.269333 33.109333 59.733333 55.808 71.253333 151.893333 26.794667 223.573333-39.082667 62.890667-115.2 103.509333-193.792 103.509334a240.810667 240.810667 0 0 1-240.64-240.554667 236.458667 236.458667 0 0 1 104.362666-196.266667c14.165333-9.472 29.269333-17.578667 45.141334-23.893333A33.792 33.792 0 0 0 405.333333 238.933333 308.821333 308.821333 0 0 0 271.36 343.722667a305.664 305.664 0 0 0-58.026667 178.346666 308.565333 308.565333 0 0 0 308.309334 308.138667c101.546667 0 200.106667-53.162667 251.221333-135.594667 62.208-100.096 46.08-229.888-38.058667-308.565333a212.138667 212.138667 0 0 0-126.72-55.296 4754.858667 4754.858667 0 0 0-9.216-34.986667 47.616 47.616 0 0 1-0.853333-25.344 33.962667 33.962667 0 0 1 40.874667-22.869333c4.778667 1.194667 9.216 3.413333 13.056 6.4 4.181333 3.072 7.338667 7.082667 11.093333 10.581333a33.877333 33.877333 0 0 0 53.162667-40.192l-0.682667-1.109333a69.717333 69.717333 0 0 0-15.36-17.578667 107.178667 107.178667 0 0 0-56.917333-24.917333 102.570667 102.570667 0 0 0-43.690667 4.522667z m-42.922667 215.381334c3.584 13.226667 7.509333 27.050667 11.52 40.704 5.205333 18.432 10.496 36.693333 14.677334 53.333333 4.949333 19.285333 7.082667 47.104-10.24 69.802667a60.842667 60.842667 0 0 1-32.256 21.333333 62.293333 62.293333 0 0 1-53.504-9.216 78.848 78.848 0 0 1-32.597334-57.514667 95.573333 95.573333 0 0 1 3.157334-34.645333c9.386667-33.365333 36.608-62.378667 71.082666-75.690667 9.216-3.584 18.688-6.229333 28.16-8.106666z" 
fill="#DD001B"
p-id="2520">
</path>
</svg>

六. 于 main.js 中引用

import './icons'

七. 于项目配置vue.config.js文件内新增代码片段

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = defineConfig({
  chainWebpack: config => {
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
})

八. 于页面中使用

 <div>
   <svg-icon class="wyy-logo" iconClass="logo"></svg-icon>
 </div>

结语

于 2023 年年末初冬

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-12-31，如有侵权请联系 cloudcommunity@tencent.com 删除

函数

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度