Vue项目----iconfont图标的使用

前言

        为什么会使用iconfont图标？可以看看该篇文档（如有侵权，请联系删除）这里说明icon的演变历史，以及一些很实用的技术文档。

手摸手，带你优雅的使用 icon首先我们来说一下前端 icon 的发展史。 在我刚开始实习时，大部分图标都是用 img - 掘金

        本文是参考上述优秀文章，从而将iconfont在项目作为一个单独的模块进行统一管理使用。 

 

正文

1.iconfont图标的下载

网址：iconfont-阿里巴巴矢量图标库

注册登录后，可以使用相关的iconfont图标

例如：搜索框搜索用户，在出现的用户图标中选择一个下载，下载类型的主要是两种：svg下载和png下载。这里主要使用svg下载。

2.svg图标方式的使用

1.创建Vue项目。这里暂时不做讲述。

2.封装SvgIcon组件。

在src\components目录下，创建SvgIcon文件夹并创建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'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

效果：

3.创建icons文件夹

src根目录下创建icons文件夹，里面创建svg文件夹和index.js文件。其中svg文件夹中存放的便是下载的svg图标，index.js是配置文件。

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// 引入Svg组件
// 注册为全局组件
Vue.component('svg-icon', SvgIcon)
//遍历Svg文件夹中的图标，所有图标被打包进 sprite（雪碧图），可通过 #icon-name 引用
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

效果： 

 

4.在main.js中引入icons

import './icons'  //icons

 效果：

5.下载插件

项目下运行命令【npm i svg-sprite-loader --save】下载插件。该插件的作用：将多个 .svg 文件合并成一个 SVG 雪碧图（sprite），并通过 ID 引用的方式使用图标

效果：

6.配置插件

在项目目录下的vue.config.js文件中配置使用插件。

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  transpileDependencies: true,
  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()
  }
})

效果：

7.在组件中使用svg

通过<svg-icon/>组件引用，其中icon-class中为svg的名字。这样，如果项目中需要更新或添加图标，直接下载svg图标到src/icons/svg中，通过<svg-icon/>组件使用即可。如下

<svg-icon icon-class="user" />

效果：

结语

        最后到此结束。想深入学习iconfont的小伙伴可以仔细专研一下前言中的文章。