@netty0911/tiny-icons

文档地址 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 组件		-