Cirry's Blog

Navie Ui中动态渲染SVG图标

2024-04-18
技术
vue
最后更新:2024-04-23
3分钟
444字

起因

在开发一些个人项目的时候,我非常喜欢使用一个开源图标库Remix Icon,这次在开发文件服务器的时候也使用了这个库,我只是单纯的觉得caddy和nginx自带的文件服务UI不好看,所以就做了一个简易版本的。

当我按照平常一样的使用方式:

安装

1
npm install remixicon --save

使用

main.js
1
import 'remixicon/fonts/remixicon.css'

文件服务一般都是非常小和简单的页面的,当我打包了之后查看打包文件大小,其中remixicon占用了非常大的空间。

改进

Remix Icon中在vue3中还有专门的引入方式:

安装

1
npm install @remixicon/vue

使用

1
<script setup lang="ts">
2
import { RiHeartFill } from "@remixicon/vue";
3
</script>
4
5
<template>
6
<RiHeartFill size="36px" color="red" className="my-icon" />
7
</template>

这是最普通的使用方式,但是我的使用场景比较复杂,我需要根据后台发来的数据来判断应该显示什么图标。

示例

extIcon.js
1
import {
2
RiFolder3Fill,
3
RiImageFill,
4
RiFileGifFill,
5
} from "@remixicon/vue"
6
7
const iconClass = {
8
dir: RiFolder3Fill,
9
png: RiImageFill,
10
gif: RiImageFill,
11
}
12
/**
13
* 获取对应文件类型的图标样式
14
* @param {string} extname 文件后缀名
15
* @param {string} type 文件类型: image | doc | music | video | audio | code | default
5 collapsed lines
16
* @returns
17
*/
18
export const getIconClass = ({ extname, type }) => {
19
return { svg: iconClass[extname], color: `text-color-${type}` }
20
}
DataTable.vue
1
<script setup>
2
function renderIcon({extname, type}) {
3
let iconClass = getIconClass({extname, type})
4
return () => h(iconClass.svg, {
5
class: iconClass.color,
6
size: '20px'
7
});
8
}
9
</script>
10
<template>
11
<component :is="renderIcon({ extname: item.ext, type: item.type })"></component>
12
</template>

这样就这可以根据传入的值来判断需要显示什么图标了。

改用这种方式来引入Svg图标之后,再来看看打包的大小变化吧,舒服多了。

知识点

这里有两个知识点,一个是渲染函数h()的使用方法,一个是组件component的使用方法。

本文标题:Navie Ui中动态渲染SVG图标
文章作者:Cirry
发布时间:2024-04-18
版权声明:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
感谢大佬送来的咖啡☕
alipayQRCode
wechatQRCode