正文
直接上链接:
背景
在图标应用中,遇到过大小、居中、多色、下载、使用、打包等多个问题,因此做了插件来依依解决这些问题
下载
使用一键下载插件进行下载,妈妈再也不用担心手点断了~
使用、打包
在vue3使用示例项目中,编写了svgIcon.ts插件来解决按需使用的问题,对下载导出的ts代码进行扫描按需编译和使用,只需要在配置文件vite.config.ts中引入即可。
因为解决了按需使用和编译打包的问题,所以在下载的时候直接把所有图标导入项目即可,不需要用什么图标才去下载,
一次性下载所有图标来使用
,如果有更新,再去全下载过来覆盖之前的图标列表,方便又快捷
图标样式问题
大小和色彩在组件中提供了配置,单色可以使用如"#FFFFFF"或[“#FFFFFF”],多色使用如[“#FFFFFF”,“#000000”]
居中问题在引入外部使用相关样式即可,使用transform解决偏移问题,
如:
<div style="display:flex;justify-content:center;align-items: center;transform: translateY(-2px);">
<sicon name="阿里巴巴" type="用户" size="18" :color="["#FFFFFF","#000000"]" />
</div>