字体图标以及svg图片的使用vite和webpack

news2025/7/9 7:16:34

先说下字体图标的使用
首先去阿里巴巴矢量图标库，选择你需要的图标（可将svg图片自己上传）添加到项目里，可以生成在线链接，或者下载资源包到本地。
资源包形式：在项目里创建一个fonts文件夹，将下载的资源包中的文件复制过去

然后在main.js中引用，假如是用下面说的两种办法的话就光引用css就行，但是假如使用方法3的话，就需要引用js，有疑问不要急，往下看

import './assets/fonts/iconfont.css' 
import './assets/fonts/iconfont'

unicode 引用不考虑，代码如下用了不知道你写了个啥玩意，不讲了谁想看自己查查吧

<i class="iconfont">&#x33;</i>

Font-class 引用

<i class="iconfont icon-sousuo"></i>

Symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章
这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
兼容性较差，支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般，还不如png。

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>
<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

到这，字体图标的使用方法就结束了，但是会发现，其实他们的本质都是上传了个svg图片给图标库然后使用，那我们本来就有svg，可不可以直接来用呢
来我们看看第三种方式，毕竟表示是未来的主流，他有个属性，fill:currentColor，就是靠这个属性来变色，这个currentColor又是个啥，

这个currentColor关键字就像是一个CSS变量，不同的是它有一个主要的限制：你只可以在能够接受值的地方使用它；如果该属性不能接受值，它也就不能接受currentColor作为值。currentColor的值是由当前元素使用的color属性的计算值决定的。也就是说，currentColor的值和当前color属性的值是一样的。

然后，我就赶紧回项目里试了试能不能改变色，

在这里插入图片描述

失败了，是不是打开的方式不对，然后我找到了这个svg图片，点开了他，引入眼帘的是一串代码，
在这里插入图片描述
将红框值改成currentColor依然不好使
然后我把整个代码都复制了过去，

然后他变了，说明啥！当是img的时候是没有办法动态再修改svg的颜色了，也说明我们可以直接用svg来改了
但是问题又来了，肯定不可能在项目里面这样用svg啊，有没有什么插件可以封装一下
vite版：
下载相关依赖

npm i fast-glob@3.x -D
npm i vite-plugin-svg-icons@2.x -D

在vite.config.js的 plugins里面配置，resolve函数需要从path模块里面引用一下

import { resolve } from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'


createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), 'src/assets/imgs/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[name]',
      // symbolId: 'icon-[dir]-[name]'
    })

封装组件

<template>
  <svg aria-hidden="true" class="svg-icon">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  prefix: { type: String, default: 'icon' },
  iconClass: { type: String, required: true },
  color: { type: String, default: '' }
})

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`)
</script>

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

在main.js中注册

import 'virtual:svg-icons-register' // 引入注册脚本
import SvgIcon from '@/components/svgIcon/index.vue' // 引入组件
app.component('SvgIcon', SvgIcon)

使用，名字就是图片的名字

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

Webpack版
封装组件是一样的
下载的依赖不同，配置不同

npm i svg-sprite-loader --save-dev

创建一个文件夹，icons下面创建一个放置svg图片的文件夹svg和一个index.js
index.js中

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

main.js中添加
import SvgIcon from './components/svgIcon/index.vue'
import './assets/icons'

app.component('SvgIcon', SvgIcon)

vue.config.js中添加

// 第一步：让其他svg loader不要对src/icons进行操作
    // 配置svg-sprite-loader

    config.module

      .rule('svg')

      .exclude.add(resolve('src/assets/icons/svg')) // 注意：路径要具体到存放的svg的路径下，不然会报错

      .end() // 第二步：使用svg-sprite-loader对src/icons下的svg进行操作

    config.module

      .rule('icons')

      .test(/\.svg$/)

      .include.add(resolve('src/assets/icons/svg')) // 注意：路径要具体到存放的svg的路径下，不然会报错

      .end()

      .use('svg-sprite-loader')

      .loader('svg-sprite-loader') // 定义规则使用时<svg class="icon"><use xlink:href="#icon-svg文件名"></use></svg>

      .options({
        symbolId: 'icon-[name]'
      })

      .end()