如何在VUE项目中引入SVG图标-阿里云开发者社区

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

2024-01-03 185

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

一小池勺❤️❤️❤️ ❤️❤️❤️❤️胸有惊雷而面如平湖者，可拜上将军也。

前言

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 年年末初冬

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

前言

具体过程

一. 安装

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

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

四. 于icons目录下新建svg目录

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

六. 于 main.js 中引用

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

八. 于页面中使用

结语

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

前言

具体过程

一. 安装

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

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

四. 于icons目录下新建svg目录

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

六. 于 main.js 中引用

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

八. 于页面中使用

结语

热门文章

最新文章

相关课程

相关电子书

相关实验场景