# @netty0911/tiny-icons

> react component svg icons

Latest version **2.0.0** (published 2022-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @netty0911/tiny-icons
pnpm add @netty0911/tiny-icons
yarn add @netty0911/tiny-icons
bun add @netty0911/tiny-icons
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2022-05-08 |
| First published | 2020-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | netty0911 |
| Maintainers | netty0911 |
| Keywords | react, component, icon, svg |

## Links

- npm: https://www.npmjs.com/package/@netty0911/tiny-icons
- npm.io page: https://npm.io/package/@netty0911/tiny-icons

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [classnames](https://npm.io/package/classnames.md) ^2.3.1

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2022-05-08
- 1.4.1 — 2021-06-07
- 1.4.0 — 2021-06-07
- 1.3.0 — 2021-06-06
- 1.2.2 — 2021-05-23
- 1.2.1 — 2021-05-20
- 1.1.7 — 2021-05-20
- 1.1.6 — 2021-02-23
- 1.1.5 — 2021-02-04
- 1.1.4 — 2021-01-20
- 1.1.3 — 2021-01-20
- 1.1.2 — 2021-01-19
- 1.1.1 — 2021-01-19
- 1.0.0 — 2020-08-27
- 0.1.3 — 2020-08-17
- … 4 more at https://npm.io/package/@netty0911/tiny-icons/versions

## README

**文档地址 http://tinyrc.netty0911.com/**

## Usage

### 基本使用

```jsx
import React from 'react';
import { AddFolder, PlusOFill } from '@netty0911/tiny-icons';

export default () => (
  <>
    <AddFolder />
    <PlusOFill style={{ color: '#8c8c8c' }} />
  </>
);
```

### 自定义图标

```jsx
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

```jsx
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` 组件 |               | -      |

---
_Source: https://npm.io/package/@netty0911/tiny-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._