如何在 Vue 项目中优雅地使用图标

techhub 2024-07-13 11:41:01 阅读 50

如何在 Vue 项目中优雅地使用图标

如何在 Vue 项目中方便易用、自动剪枝、可自定义地使用各种图标库(Material Symbols/ Material Icons),本文提供了一个实用流程。

1. 字体图标与矢量图标

目前主要有两种图标类型:字体图标和矢量图标。

字体图标是在网页打开时,下载一整个图标库,通常可以通过特定标签例如 <code><i> 来使用,优点是方便地实现文字混排,缺点是包体积大,且难以自定义。

矢量图标本质是 <svg> 标签,包中只含有所需的图标,且很容易自定义,也可以选用不同图标库来源的图标,甚至可以用自定义 SVG,缺点是与文字混排相对复杂。

本文推荐并主要使用矢量图标。

2. 矢量图标源

目前比较全面的图标集:

  1. Google Material Symbols (之前的 Google Icon):比较现代化的图标集,包括圆角尖角图标集、 空心实心图标集,主打交互图标,没有商标。

  2. Material Design Icons:Material 风格的另一个图标集,大而全。

  3. Iconfont:阿里的图标库,包括很多带颜色的特殊图标

  4. Iconify:一个各种图标集的收集站,我们后文使用的包可以使用其中的所有图标集。

以上基本可以满足任何使用要求了。

3. 安装图标包及其剪枝策略

为了在 Vue 中便捷地使用图标,可以使用 iconify-prerendered 库,包含了所有 iconify 中图标集的图标的组件:

# 安装 Material Symbols 包

npm i @iconify-prerendered/vue-material-symbols

# 安装 Material Design Icons 包

npm i @iconify-prerendered/vue-mdi

当需要引入时,可以使用:

<script setup lang="ts">code>

import { IconWarningRounded } from '@iconify-prerendered/vue-material-symbols';

</script>

<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. 图标与文字混排

由于我们使用的图标包本质上会将图标以 <svg> 标签的形式渲染,因此需要考虑混排的问题,一般用 flex 容器先包含两个元素,然后在 icon 上使用 my-auto 以实现:

<script setup lang="ts">code>

import { IconWarningRounded } from '@iconify-prerendered/vue-material-symbols';

</script>

<template>

<div >

<IconWarningRounded />

<p >Error!</p>

</div>

</template>

5. 自定义 SVG 图标

自定义 SVG 图标一般需要关注:viewBox(代表定义的画布范围)、fill(颜色)两个属性:

<template>

<svg viewBox="0 0 16 16" fill="currentColor">code>

<path

d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"code>

/>

</svg>

</template>

这个 SVG 可以由 Adobe Illustrator 生成 (另存为 SVG),略微修改即可做成 Vue 组件使用。

如果需要修改图标颜色,可以直接设置 color 属性:

<script setup lang="ts">code>

import { IconWarningRounded } from '@iconify-prerendered/vue-material-symbols';

</script>

<template>

<IconWarningRounded />

</template>

如果需要分别设定各个路径,可以直接在 <path> 上进行修改,例如使用 fill 属性修改填充颜色:

<template>

<svg viewBox="0 0 16 16">code>

<path

d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"code>

/>

<path

d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"code>

/>

</svg>

</template>

6. 案例分析

上述方式已经使用在开源项目 GithubStar.Pro 中,你可以进入网站体验。该项目的源码在:Github,提供了一个 Vue 3.0 + Tailwind CSS + Iconify-Prerendered 的使用案例。

也欢迎各位使用 GithubStar.Pro 互赞平台,提高您的开源项目知名度,收获更多用户。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。