如何在 Vue 项目中优雅地使用图标
1. 字体图标与矢量图标目前主要有两种图标类型：字体图标和矢量图标。
字体图标是在网页打开时，下载一整个图标库，通常可以通过特定标签例如 <i> 来使用，优点是方便地实现文字混排，缺点是包体积大，且难以自定义。
矢量图标本质是<template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template>标签，包中只含有所需的图标，且很容易自定义，也可以选用不同图标库来源的图标，甚至可以用自定义 SVG，缺点是与文字混排相对复杂。
本文推荐并主要使用矢量图标。
2. 矢量图标源
目前比较全面的图标集：
[*]Google Material Symbols (之前的 Google Icon)：比较现代化的图标集，包括圆角尖角图标集、 空心实心图标集，主打交互图标，没有商标。
[*]Material Design Icons：Material 风格的另一个图标集，大而全。
[*]Iconfont：阿里的图标库，包括很多带颜色的特殊图标
[*]Iconify：一个各种图标集的收集站，我们后文使用的包可以使用其中的所有图标集。
以上基本可以满足任何使用要求了。
3. 安装图标包及其剪枝策略
为了在 Vue 中便捷地使用图标，可以使用 iconify-prerendered 库，包含了所有 iconify 中图标集的图标的组件：
# 安装 Material Symbols 包
npm i @iconify-prerendered/vue-material-symbols
# 安装 Material Design Icons 包
npm i @iconify-prerendered/vue-mdi当需要引入时，可以使用：
<template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template>@iconify-prerendered/vue-material-symbols 的图标一般命名格式为：
Icon + 图标名 + 可选: Outline (空心) + 可选: Rounded (圆角)
同时，这里我们需要引入各个所需的图标，而不能使用通配符：
# 不能这样
import * from '@iconify-prerendered/vue-mdi';这是因为我们的代码需要剪枝友好。剪枝是一种代码编译策略，毕竟不可能将包中所有的图标都发往客户端浏览器，所以编译为 js 包时，只会包含已经被 import 的图标，因此最大程度地减少了包体积。
注意：当 vite 运行在 dev 模式时，iconify-prerendered 会将整个图标包 (10M) 发送到浏览器，而不会剪枝，因此首次加载会很慢，请耐心等待。build 后会自动剪枝，不会再出现这种情况。
4. 图标与文字混排
由于我们使用的图标包本质上会将图标以<template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template>标签的形式渲染，因此需要考虑混排的问题，一般用 flex 容器先包含两个元素，然后在 icon 上使用 my-auto 以实现：
<template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template><template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template><template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template><template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template><template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template>Error!
<template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template>5. 自定义 SVG 图标
自定义 SVG 图标一般需要关注：viewBox（代表定义的画布范围）、fill（颜色）两个属性：
<template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template><template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template><template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template><template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template>这个 SVG 可以由 Adobe Illustrator 生成 (另存为 SVG)，略微修改即可做成 Vue 组件使用。
如果需要修改图标颜色，可以直接设置 color 属性：
<template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template>如果需要分别设定各个路径，可以直接在<template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template>上进行修改，例如使用 fill 属性修改填充颜色：
<template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template><template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template><template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template><template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template><template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template><template>
<template>
<IconWarningRounded/>
</template><IconWarningRounded />
</template>6. 案例分析
上述方式已经使用在开源项目 GithubStar.Pro 中，你可以进入网站体验。该项目的源码在：Github，提供了一个 Vue 3.0 + Tailwind CSS + Iconify-Prerendered 的使用案例。
也欢迎各位使用 GithubStar.Pro 互赞平台，提高您的开源项目知名度，收获更多用户。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]