5.6 KiB
5.6 KiB
::: anchor :::
::: title 基本介绍 :::
::: describe 语义化的矢量图形。使用图标组件，你需要安装 @layui/icons-vue 图标组件包
:::
::: title 基础使用 :::
::: demo 使用 lay-icon 标签, 创建图标组件
:::
::: title 图标颜色 :::
::: demo 使用 color 属性设置颜色
:::
::: title 图标尺寸 :::
::: demo 使用 size 属性设置尺寸
:::
::: title 图标组件 :::
::: describe 在 0.2.4 版本后, 图标支持组件化的调用方式, 首先你需要安装 @layui/icons-vue 依赖。
:::
npm install @layui/icons-vue
::: describe 接下来, 你可以像之前使用组件一样去创建图标。 :::
<template>
<!-- 组件图标 -->
<AlignCenterIcon></AlignCenterIcon>
<DiamondIcon></DiamondIcon>
</template>
<script setup>
import { AlignCenterIcon, DiamondIcon } from '@layui/icons-vue';
</script>
::: title 图标列表 :::
::: demo
-
{{ layIcon.name }}&#x{{ iconsUnicode[index] }};{{ layIcon.class }}
:::
::: title 图标属性 :::
::: table
| 属性 | 描述 | 默认值 |
|---|---|---|
| type | 图标 | layui-icon-home |
| prefix | 前缀 | layui-icon |
| color | 颜色 | -- |
| size | 尺寸 | -- |
:::
::: previousNext iconfont :::