Vue项目中使用iconfont图标（字体篇）

下载

在iconfont中新建项目，过程中输入Font Family 和 前缀；
将图标添加至项目之后，在我的项目中找到要下载的项目，选择Font class通过下载至本地按钮，下载素材包；
下载后，解压得到如下文件：

demo.css
demo_index.html
iconfont.css
iconfont.js
iconfont.json
iconfont.ttf
iconfont.woff
iconfont.woff2

使用

在 Vue 项目 src/assets 目录中创建 iconfont 文件夹，将下载的文件放到 iconfont 目录，在需要使用的.vue文件中先在<script>引入 css 文件，之后在<template>中使用。

<template>
  ...
  <i class="iconfont icon-chuangtougui">
  ...
</template>
<script>
  import '@/assets/iconfont/iconfont.css'
</script>

本节参考

在element-ui中对el-input的suffix-icon使用iconfont的小图标

Vue项目中使用iconfont图标（svg篇）

安装与配置

安装依赖

npm install --save-dev svg-sprite-loader
# 或者
yarn add svg-sprite-loader --dev

创建文件夹，并拷贝文件

在 src/assets 目录中创建 iconsvg 文件夹，并在 iconsvg 中继续创建 svg 文件夹，把下载的 .svg 文件放在 src/assets/iconsvg/svg 目录中。

在 src/assets/iconsvg 目录中新建文件 index.js，内容如下：

import Vue from 'vue'
import SvgIcon from '@/components/common/svgIcon' // svg组件

// 注册到全局
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

vue-cli 配置

在项目根目录中修改vue.config.js（如果没有请新建），内容如下：

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/assets/iconsvg')) //处理svg目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
}

创建自定义组件

在 src/components 目录中新建 common 文件夹，并在其中新建文件 svgIcon.vue，内容如下：

<template>
  <svg :class="svgClass" aria-hidden="true">
    <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;
  fill: currentColor;
  overflow: hidden;
}
</style>

引入组件

在 main.js 中添加import '@/assets/iconsvg'。

使用组件

可以在 css 中对 svg 图标设置尺寸和颜色，如果设置颜色后不起作用，需要在.svg文件中找到fill并删除。

<template>
  <svg-icon icon-class="clock" style="height: 30px; width: 30px; color: #f47920"></svg-icon>
</template>

本节参考

vue项目中使用svg并设置大小颜色等样式

系列链接

Vue脚手架常用工具学习(第一季)
Vue脚手架常用工具学习(第二季)