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

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

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

import './assets/fonts/iconfont.css' 
import './assets/fonts/iconfont'
  1. unicode 引用 不考虑 ,代码如下 用了不知道你写了个啥玩意,不讲了 谁想看 自己查查吧
<i class="iconfont">&#x33;</i>
  1. Font-class 引用
<i class="iconfont icon-sousuo"></i>
  1. 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()

使用方法与vite相同

相关文章
未来必热:SVG Sprites技术介绍

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值