@swc-ui/icons

Web Component 图标库

为 @swc-ui/components Web Component 组件库封装的图标库

安装

选择一个你喜欢的包管理器安装

# NPM
$ npm install @swc-ui/icons

# Yarn
$ yarn add @swc-ui/icons

# pnpm
$ pnpm install @swc-ui/icons

注册使用

1、批量一次性引入所有图标注册

// 全量引入
import { defineCustomElements} from '@swc-ui/icons/loader'
defineCustomElements()

2、按需引入图标注册【推荐】

// 按需引入，自动注册
import '@swc-ui/icons/dist/components/swc-icon-add-location.js'

像普通 html 标签一样使用

<swc-icon-add-location></swc-icon-add-location>

3、所有 icon 名称

import { icons } from '@swc-ui/icons'

基础用法

通过设置 name 来使用其他图标

<!-- 使用 swc-icon 为 SVG 图标提供属性 -->
<swc-icon name="edit" color="red"></swc-icon>

<!-- 或者独立使用它，不从父级获取属性 -->
<swc-icon-edit></swc-icon-edit>

倾斜 rotate

通过rotate倾斜 icon 角度

<swc-icon name="edit" rotate="30"></swc-icon>
<swc-icon name="reading" rotate="60"></swc-icon>

旋转

添加spin属性来使 icon 旋转

<swc-icon name="loading" spin></swc-icon>
<swc-icon name="refresh-right" spin></swc-icon>
<swc-icon name="refresh" spin></swc-icon>

大小

添加size属性来设置大小

<swc-icon name="loading" size="16"></swc-icon>
<swc-icon name="loading"></swc-icon>
<swc-icon name="loading" size="24"></swc-icon>
<swc-icon name="loading" size="30"></swc-icon>
<swc-icon name="loading" size="36"></swc-icon>

颜色

添加color属性来设置颜色

<swc-icon name="loading"></swc-icon>
<swc-icon name="loading" color="red"></swc-icon>
<swc-icon name="loading" color="blue"></swc-icon>
<swc-icon name="loading" color="pink"></swc-icon>
<swc-icon name="loading" color="green"></swc-icon>

Attrs

属性名	说明	类型	可选值	默认值
name	图标名称	string	@swc-ui/icons 图标	-
rotate	图标旋转角度	number	0	-
spin	360度旋转	boolean	true、false	false
size	图标大小	string	合法的 css 单位	1em
color	图标颜色	string	合法的颜色值	-