iconfont一键下载所有图标、在vue3中的按需使用和多色配置

626 阅读1分钟

正文

直接上链接:

iconfont图标一键下载浏览器插件(2000+图标一秒下载打包)

iconfont在vue3中按需使用和编译打包示例

背景

在图标应用中,遇到过大小、居中、多色、下载、使用、打包等多个问题,因此做了插件来依依解决这些问题

下载

使用一键下载插件进行下载,妈妈再也不用担心手点断了~

1.png

使用、打包

在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>