起因
在开发一些个人项目的时候,我非常喜欢使用一个开源图标库Remix Icon,这次在开发文件服务器的时候也使用了这个库,我只是单纯的觉得caddy和nginx自带的文件服务UI不好看,所以就做了一个简易版本的。
当我按照平常一样的使用方式:
安装
使用
文件服务一般都是非常小和简单的页面的,当我打包了之后查看打包文件大小,其中remixicon占用了非常大的空间。
改进
Remix Icon中在vue3中还有专门的引入方式:
安装
使用
这是最普通的使用方式,但是我的使用场景比较复杂,我需要根据后台发来的数据来判断应该显示什么图标。
示例
这样就这可以根据传入的值来判断需要显示什么图标了。
改用这种方式来引入Svg图标之后,再来看看打包的大小变化吧,舒服多了。
知识点
这里有两个知识点,一个是渲染函数h()的使用方法,一个是组件component的使用方法。