<!-- iconfont 应用 -->
<i class="iconfont icon-user" style="color: #f00;font-size: 64px;"></i>
<!-- VS -->
<!-- 封装 svg 应用 -->
<svg-icon icon="user" color="#f00" :size="64" />
同时,在 flex 布局大行其道的明天,icons 与文字的对其,曾经不存在任何问题。
SVG 还有一个 iconfont 做不到的个性:多色彩图标。这足以满足一些对非凡图标显示的场景。
平滑适度指南
- Vite + Vue 3
首先,在 src
目录下创立 icons
目录,用以搁置收集的 单体 SVG
文件。
接着,装置 vite-plugin-svg-icons
这个依赖:
$ pnpm add vite-plugin-svg-icons -D
改一点 Vite
的配置:
// vite.config.js
import {defineConfig} from 'vite'
import {resolve} from 'path'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
export default defineConfig({
...,
plugins:[
...,
createSvgIconsPlugin({iconDirs: [resolve(process.cwd(), 'src/icons')],
symbolId: 'i-[name]',
customDomId: '__svg__icons__dom__',
})
]
})
在 main.js
中注入生成 svg symbols
的办法:
// src/main.js
import 'virtual:svg-icons-register'
在做完以上各个步骤之后,body 中就会多出一个 svg 元素,外面就是 icons 目录下单体文件所对应的 symbols。
而后,咱们就能够创立 SvgIcon
组件了:
<!-- src/components/SvgIcon.vue -->
<template>
<svg class="icon" :width="size" :height="size" aria-hidden="true">
<use :xlink:href="`#i-${icon}`" :fill="color" />
</svg>
</template>
<script setup>
defineProps({
icon: {
type: String,
required: true
},
color: {
type: String,
default: '#fff'
},
size: {
type: Number,
default: 32
}
})
</script>
能够在 main.js
中进行全局注册:
// src/main.js
import {createApp} form 'vue'
import App from '@/App.vue'
import SvgIcon from '@components/SvgIcon.vue'
const app = createApp(App)
app.component('SvgIcon', SvgIcon)
组件的应用:
<svg-icon icon="user" color="#f00" :size="64" />
<!-- icon 属性对应 icons 目录下 svg 文件名:例如,上述例子中 user 对应 icons/user.svg -->
后续如果 icons 须要裁减,只须要把新增的 svg 文件间接增加进 icons 目录即可。
- 小程序
因为小程序的 wxml 不反对 SVG 间接渲染,只能通过 image
的 src 进行显示。此种显示的形式,最大的问题是如何更改 icon 的色彩不能够更改,所以须要对文件进行解决。
实现思路:svg 文件 => binary 字符串 => 替换 fill 属性
。
具体的实现形式:
<!-- components/SvgIcon/index.wxml -->
<view class="icon-wrapper" style="width:{{size}}rpx;height:{{size}}rpx;">
<image class="icon" src="{{iconPath}}" mode="aspectFit"/>
</view>
/* components/SvIcon/index.wxss */
.icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.icon {
width: 100%;
height: 100%;
}
// components/SvIcon/index.js
Component({
properties: {
icon: {
type: String,
required: true
},
color: {
type: String,
value: '#f00'
},
size: {
type: Number,
value: 32
}
},
data: {
base: 'icons/',
iconPath: ''
},
lifetimes: {attached() {const { base} = this.data
const {icon, color} = this.properties
const filePath = `${base}${icon}.svg`
const svgBinary = wx.getFileSystemManager().readFileSync(filePath, 'binary')
const svgBase64 = `data:image/svg+xml,${encodeURIComponent(svgBinary.replace(/(#[a-fA-F0-9]{6})|(#[a-fA-F0-9]{3})/g, color))}`
this.setData({iconPath: svgBase64})
}
}
})
而后,在 app.json
进行全局注册:
{
...,
"usingComponents": {"svg-icon": "./components/SvgIcon/index"}
}
组件应用:
<svg-icon icon="user" color="#f00" size="{{64}}" />
(本文完)
本文由博客一文多发平台 OpenWrite 公布!