先说下字体图标的使用
首先去阿里巴巴矢量图标库,选择你需要的图标(可将svg图片自己上传)添加到项目里,可以生成在线链接,或者下载资源包到本地。
资源包形式:在项目里创建一个fonts文件夹,将下载的资源包中的文件复制过去
然后在main.js中引用, 假如是用下面说的两种办法的话 就光引用css就行,但是假如使用方法3的话,就需要引用js,有疑问不要急,往下看
import './assets/fonts/iconfont.css'
import './assets/fonts/iconfont'
- unicode 引用 不考虑 ,代码如下 用了不知道你写了个啥玩意,不讲了 谁想看 自己查查吧
<i class="iconfont">3</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()
使用方法与vite相同
相关文章
未来必热:SVG Sprites技术介绍