@netty0911/tiny-icons
v2.0.0
Published
react component svg icons
Downloads
6
Readme
文档地址 http://tinyrc.netty0911.com/
Usage
基本使用
import React from 'react';
import { AddFolder, PlusOFill } from '@netty0911/tiny-icons';
export default () => (
<>
<AddFolder />
<PlusOFill style={{ color: '#8c8c8c' }} />
</>
);
自定义图标
import React from 'react';
import Icon from '@netty0911/tiny-icons';
const BookSvg = () => (
<svg
width="24px"
height="26px"
viewBox="0 0 24 26"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<g fillRule="nonzero" fill="none">
<rect fill="#93C3FF" x="1" width="23" height="26" rx="1.075" />
<path fill="#6CA4EA" d="M17 0h3v26h-3z" />
<rect fill="#6CA4EA" y="4" width="3" height="2" rx=".307" />
<rect fill="#6CA4EA" y="12" width="3" height="2" rx=".307" />
<rect fill="#6CA4EA" y="20" width="3" height="2" rx=".307" />
</g>
</svg>
);
const BookIcon = (props) => <Icon {...props} component={BookSvg} />;
export default () => <BookIcon style={{ fontSize: '32px' }} />;
使用 iconfont
import React from 'react';
import { createFromIconfont } from '@netty0911/tiny-icons';
const IconFont = createFromIconfont({
scriptUrl: '//at.alicdn.com/t/font_1942862_ol5c9n8d4ne.js',
});
export default () => (
<div>
<IconFont style={{ fontSize: '32px' }} type="icon-at-plus-o-fill" />
</div>
);
API
通用图标
| 参数 | 说明 | 类型 | 默认值 |
| :-------- | :----------------------------------------- | :------------ | ------ |
| className | 设置图标的样式名 | string | - |
| style | 设置图标的样式,例如 fontSize
和 color
| CSSProperties | - |
| spin | 是否有旋转动画 | boolean | false |
| rotate | 图标旋转角度(IE9 无效) | number | - |
自定义图标
| 参数 | 说明 | 类型 | 默认值 |
| --------- | ---------------------------------------------------------------- | ------------- | ------ |
| style | 设置图标的样式,例如 fontSize
和 color
| CSSProperties | - |
| spin | 是否有旋转动画 | boolean | false |
| rotate | 图标旋转角度(IE9 无效) | number | - |
| component | 控制如何渲染图标,通常是一个渲染根标签为 <svg>
的 React
组件 | | - |