Vue--整合SVG Icon图标--方法/实例

ゞ浴缸里的玫瑰 2023-09-28 20:51 8阅读 0赞

原文网址：[Vue--整合SVG Icon图标--方法/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_SVG Icon_--_IT_-CSDN]

## 简介 ##

**说明**

本文介绍Vue如何整合SVG图标。

**前端图标的发展**

从上到下是从古至今的顺序

1.  使用img实现
    
    1.  一个页面的请求资源中图片 img 占了大部分
2.  image sprite（雪碧图）
    
    1.  将多个图片合成一个图片，然后利用 css 的 background-position 定位显示不同的 icon 图标
    2.  是为了优化方案1而提出的。
    3.  维护困难。每新增一个图标，都需要改动原始图片，还可能影响到前面定位好的图片。
3.  font库
    
    1.  优点：使用方便
    2.  缺点：找起来不方便，定制化很差，Icon不好看
4.  iconfont
    
    1.  阿里做的
    2.  图标数量多，有几百个公司的开源图标库，有各式各样的小图标，支持自定义创建图标库。

**SVG的好处**

可以轻松地按比例放大和缩小图标。SVG图标是矢量图，具有优于位图图形的优点，即按比例放大或缩小时它们仍然看起来不错。而位图图形在按比例放大时趋于像素化，而在按比例缩小时会失去质量（像素）。

## 1.创建Vue项目 ##

见：[@vue/cli4--使用图形化界面创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客\_vuecli图形化界面][vue_cli4--_--_IT_-CSDN_vuecli]

## 2.安装svg-sprite-loader ##

npm install svg-sprite-loader -D

## 3.配置svg-sprite-loader ##

### 1.新建存放svg图标的目录 ###

在项目 src 目录下新建 src/icons/svg 目录（存放 svg 图标文件）。

### 2.创建svg文件的入口文件 ###

在 src/icons 下创建 icons 目录的入口文件 index.js ，负责svg文件的加载

import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'
    Vue.component('svg-icon', SvgIcon)
    
    /**
     * require.context 的参数说明
     * './svg' 代表要查找的文件路径
     * false 代表是否查找子目录
     * /\.svg$/ 代表要匹配文件的正则
     *
     */
    const svg = require.context('./svg', false, /\.svg$/)
    const requireAll = (requireContext) =>
      requireContext.keys().map(requireContext)
    requireAll(svg)

### 3.配置vue.config.js ###

在vue.config.js中添加如下配置：

'use strict'
    
    const path = require('path')
    const resolve = dir => path.join(__dirname, dir)
    
    module.exports = {
      chainWebpack (config) {
        // 配置 svg-sprite-loader
        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()
      }
    }

## 4.创建图标组件：SvgIcon.vue ##

在src/components下创建SvgIcon.vue

（或者：在src/components下创建SvgIcon文件夹，在里边创建index.vue）

内容如下：

<template>
      <svg className="svg-icon" aria-hidden="true">
        <use :xlink:href="iconName"/>
      </svg>
    </template>
    <style>
    .svg-icon {
      width: 1.5em;
      height: 1.5em;
    }
    </style>
    <script>
    export default {
      props: {
        iconClass: {
          type: String,
          required: true
        }
      },
      computed: {
        iconName () {
          return `#icon-${this.iconClass}`
        }
      }
    }
    </script>

## 5.使用SvgIcon组件 ##

### 1.全局引入icons ###

在 main.js 入口文件中 全局引入 icons：

import './icons'

### 2.下载svg文件 ###

去 [iconfont][] 图标网站下载个svg图标。

将下载的 svg 图标放置到 src/icons/svg 目录下。这里我下载的是一个搜索图标。

### 3.在组件中引入svg图标 ###

新建components/Parent.vue

<template>
      <div>
        <div>
          这是Parent。
        </div>
        <svg-icon icon-class="search"></svg-icon>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Parent'
    }
    </script>
    
    <style scoped>
    
    </style>

修改router/index.js

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Parent from '../components/Parent'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'Parent',
        component: Parent
      }
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router

## 6.测试 ##

访问：[http://localhost:8080/\#/][http_localhost_8080]

结果：

![8e565cf296054d7cae96427503d0e7f4.png][]

## 7.压缩svg图标（非必须） ##

我们从iconfont下载的svg图标已经比较精简了，但里边还是有些无用信息（比如注释）。而且，如果svg图标是从设计那里拿到的，可能会不够精简，这时可以使用svgo来进行压缩。

见：[SVGO--使用/实例\_IT利刃出鞘的博客-CSDN博客][SVGO--_IT_-CSDN]

## 其他网址 ##

[SVG 使用教程：如何在 Vue 中使用 SVG icon 图标系统 - 卡拉云][SVG _ Vue _ SVG icon _ -]

[Svg Icon 图标 | vue-element-admin][Svg Icon _ _ vue-element-admin]

[手摸手，带你优雅的使用 icon - 掘金][icon -]

[Vue--_SVG Icon_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126394999
[vue_cli4--_--_IT_-CSDN_vuecli]: https://knife.blog.csdn.net/article/details/125397525
[iconfont]: https://www.iconfont.cn/
[http_localhost_8080]: http://localhost:8080/#/
[8e565cf296054d7cae96427503d0e7f4.png]: https://img-blog.csdnimg.cn/8e565cf296054d7cae96427503d0e7f4.png
[SVGO--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126411662
[SVG _ Vue _ SVG icon _ -]: https://kalacloud.com/blog/using-svg-and-vue-complete-guide/
[Svg Icon _ _ vue-element-admin]: https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/svg-icon.html
[icon -]: https://juejin.cn/post/6844903517564436493