Navie Ui中动态渲染SVG图标

起因

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

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

安装

1
npm install remixicon --save

使用

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>

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

示例

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
}

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的使用方法。