42 lines
1.5 KiB
Markdown
42 lines
1.5 KiB
Markdown
|
# 图标
|
|||
|
|
|
|||
|
|
## 使用图标
|
|||
|
|
|
|||
|
|
可以通过 tailwindcss 中的图标 class 来直接使用图标，例如
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<span class="icon-[material-symbols--person-outline]"></span>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
而你需要的图标可以在 [Iconify Material 图标库](https://icon-sets.iconify.design/material-symbols/) 中搜索。
|
|||
|
|
|
|||
|
|
通过点击图标库中的某个图标，你需要在详情栏中选择 CSS - Tailwind Css 栏，其中会告知你该图标对应的 class 名称。
|
|||
|
|
|
|||
|
|
## 调整图标
|
|||
|
|
|
|||
|
|
如果您需要调整颜色，您可以在 class 中添加 `text-<color>` 来调整图标颜色，例如
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<span class="icon-[material-symbols--person-outline] text-red-500"></span>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
如果您需要调整图标大小，您可以在 class 中添加 `text-<size>` 来调整图标大小，例如
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<span class="icon-[material-symbols--person-outline] text-2xl"></span>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
更多的调整方法可以参考 [Iconify 图标库调整](https://iconify.design/docs/usage/css/tailwind/tailwind4/size-color.html)
|
|||
|
|
|
|||
|
|
## 需要更多图标
|
|||
|
|
|
|||
|
|
您可以在 [Iconify 图标库](https://icon-sets.iconify.design/) 中搜索更多图标。
|
|||
|
|
|
|||
|
|
我们为您预装的是 Material Symbols 图标库。如果您需要使用别的图标库，可以通过 `@iconify-json/{prefix}` 来 install，注意 {prefix} 的名称要改成中划线模式，例如您需要安装名为 Material Symbols Light 的图标库
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
bun add -D @iconify-json/material-symbols-light
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
更多的安装方法可以参考 [Iconify 图标库安装](https://iconify.design/docs/usage/css/tailwind/tailwind4/)
|