0.2.4 • Published 12 months ago
@aloudata/icons-react v0.2.4
快速上手
安装
yarn add @aloudata/icons-react --save
引用图标
在组件的上方引用@aloudata/icons-react
,并在组件的渲染函数中使用:
import {Home} from '@aloudata/icons-react';
// examples
<Home/>
<Home fill="red"/>
Style Sheet
引用预设样式
import '@aloudata/icons-react/styles/index.css';
按需加载
可以使用babel-plugin-import来按需加载图标
配置如下:
{
"plugins": [
[
"import",
{
"libraryName": "@aloudata/icons-react",
"libraryDirectory": "es/icons",
"camel2DashComponentName": false
}
]
]
}
使用Icon组件
我们更推荐使用按需加载的方式来加载图标,因为这样可以大幅度缩减编译后代码体积, 但是在有些类似远程加载的菜单的场景下,直接引用全部图标可以缩减开发成本。
使用方式:
import Icon, {IconType} from '@aloudata/icons-react/es/all';
import React, {Fragment} from 'react';
export function Demo(props: {type: IconType}): JSX.Element {
const {type} = props;
return (
<Fragment>
<Icon type={type} theme="filled" />
<Icon type="People" theme="filled" />
<Icon type="Switch" />
</Fragment>
)
}
当你不确定type是否合法时,你可以这样做
import Icon, {ALL_ICON_KEYS, IconType} from '@icon-park/react/es/all';
import React, {Fragment} from 'react';
export function Demo(props: {type: IconType}): JSX.Element {
const {type} = props;
if(ALL_ICON_KEYS.indexOf(type) < 0) {
return (
<span>图标不存在</span>
);
}
return (
<Fragment>
<Icon type={type} theme="filled" />
<Icon type="AddText" theme="filled" />
<Icon type="add-text" />
</Fragment>
)
}
属性
属性名称 | 介绍 | 类型 | 默认值 | 注释 |
---|---|---|---|---|
theme | 图标主题 | 'outline' | 'filled' | 'two-tone' | 'multi-color' | 'outline' | |
size | 图标的大小,宽高相同 | number | string | '1em' | |
spin | 给图标加旋转效果 | boolean | false | |
fill | 图标的颜色,不超过4个颜色,默认为当前颜色 | string | string[] | 'currentColor' | |
strokeLinecap | svg元素的stroke-linecap属性 | 'butt' | 'round' | 'square' | 'round' | |
strokeLinejoin | svg元素的stroke-linejoin属性 | 'miter' | 'round' | 'bevel' | 'round' | |
strokeWidth | svg元素的stroke-width属性 | number | 4 |
其他属性
你可以使用定义的HTMLAttributes<HTMLSpanElement>>
上的全部属性,比如:
- className
- style
- onClick
- ...
0.2.3
12 months ago
0.2.4
12 months ago
0.2.1
1 year ago
0.2.0
1 year ago
0.2.2
1 year ago
0.1.10
1 year ago
0.1.11
1 year ago
0.1.12
1 year ago
0.1.0
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago
0.1.8
1 year ago
0.1.7
1 year ago
0.1.9
1 year ago
0.1.3
1 year ago
0.1.6
1 year ago
0.1.5
1 year ago
0.0.14
1 year ago
0.0.12
2 years ago
0.0.13
1 year ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago