# amos-icon

> amos icon

Latest version **1.1.6** (published 2022-12-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install amos-icon
pnpm add amos-icon
yarn add amos-icon
bun add amos-icon
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2022-12-12 |
| First published | 2022-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 342.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ilex.h |
| Maintainers | ilex.h |

## Links

- npm: https://www.npmjs.com/package/amos-icon
- npm.io page: https://npm.io/package/amos-icon

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5

## Recent versions

- 1.1.6 (latest) — 2022-12-12
- 1.1.5 — 2022-12-12
- 1.1.4 — 2022-12-12
- 1.1.3 — 2022-12-12
- 1.1.2 — 2022-12-12
- 1.1.1 — 2022-12-12
- 1.1.0 — 2022-12-12
- 1.0.7 — 2022-12-12
- 1.0.6 — 2022-12-12
- 1.0.5 — 2022-12-12
- 1.0.4 — 2022-12-12
- 1.0.3 — 2022-12-12
- 1.0.2 — 2022-12-12
- 1.0.1 — 2022-12-12
- 1.0.0 — 2022-12-12

## README

# amos-icon

## install

```bash
  npm install amos-icon
```

## useage

### use Icon

该方式以字体图标为主，最终以 i 标签输出

```js
import Icon from 'amos-icon';

/**
 * Icon 图标默认为自定义图标
 *  如果要加入font-awesome或其他步骤如下：
 *  支持 font-awesome 和 material-design-iconic-font
    默认的前缀为 icon，如果使用less/scss，生成这两个字体的css时，设置 prefix 为 icon
    如果使用这两个字体原生的前缀 fa 或者 zmdi，需要设置prefix
<Icon
    prefix='amosicon' // amosicon 全局 自定义
    icon="string"     // 图标名称，不带前缀部分
    spin={bool}       // 是否旋转。默认值为 false
    size={int|string} // 图标尺寸，可选值为 [lg|2x|3x|4x|5x]，或者为数字 lg 数字 2-5
                      // 转化为 amosicon-lg (33% increase), amosicon-2x, amosicon-3x, amosicon-4x, or amosicon-5x
    font={string}     // 指定font-family, 会覆盖style中设置的font-family
    color={string}     // 指定color, 会覆盖style中设置的color
    style={object}    // 样式，fontSize、color等等
    >
  {string}        // code （可选）
</Icon>
  */
<Icon
    prefix='amosicon' // amosicon 全局
    icon="string"     // 图标名称，不带前缀部分
    spin={bool}       // 是否旋转。默认值为 false
    size={int|string} // 图标尺寸，可选值为 [lg|2x|3x|4x|5x]，或者为数字 1-5
    font={string}     // 指定font-family
    color={string}     // 指定color
    style={object}    // 样式，fontSize、color等等
    >
  {string}        // code （可选）
</Icon>
```

> 注意，如果采用 [iconfont](https://www.iconfont.cn/) 中的图标库时，需要自行引入 `iconfont.css` 文件。

### use symbol svg

该方式，最终以 svg 方式输出。该模式下，需要传入 `width、height` 表示 svg 文件的大小，默认为 `1em`

```js
import { SymbolSvg } from 'amos-icon';

/**
 * Icon 图标默认为自定义图标
 *  如果要加入font-awesome或其他步骤如下：
 *  支持 font-awesome 和 material-design-iconic-font
    默认的前缀为 icon，如果使用less/scss，生成这两个字体的css时，设置 prefix 为 icon
    如果使用这两个字体原生的前缀 fa 或者 zmdi，需要设置prefix
<Icon
    prefix='amosicon' // amosicon 全局 自定义
    icon="string"     // 图标名称，不带前缀部分
    spin={bool}       // 是否旋转。默认值为 false
    size={int|string} // 图标尺寸，可选值为 [lg|2x|3x|4x|5x]，或者为数字 lg 数字 2-5
                      // 转化为 amosicon-lg (33% increase), amosicon-2x, amosicon-3x, amosicon-4x, or amosicon-5x
    font={string}     // 指定font-family, 会覆盖style中设置的font-family
    color={string}     // 指定color, 会覆盖style中设置的color
    style={object}    // 样式，fontSize、color等等
    width={string}    // svg 宽
    height={string}    // svg 高
    >
  {string}        // code （可选）
</Icon>
*/

<SymbolSvg
    prefix='amosicon' // amosicon 全局
    icon="string"     // 图标名称，不带前缀部分
    spin={bool}       // 是否旋转。默认值为 false
    size={int|string} // 图标尺寸，可选值为 [lg|2x|3x|4x|5x]，或者为数字 1-5
    font={string}     // 指定font-family
    color={string}     // 指定color
    style={object}    // 样式，fontSize、color等等
    width="24px"    // svg 宽
    height="24px"    // svg 高
    >
  {children}        // code （可选）
</SymbolSvg>
```

> 注意，如果采用 [iconfont](https://www.iconfont.cn/) 中的图标库时，需要自行引入 `iconfont.js` 文件。

## API

### props

|name|type|default| description|
|-----|---|--------|----|
|prefix | string | `amosicon`| icon前缀 |
|icon | string | - | icon名称, 也可以是图片路径、svg路径，及其 base64 格式内容 |
|spin | boolean | false | 是否旋转 |
|size | `int|string` | - | 图标尺寸，可选值为 `[lg|2x|3x|4x|5x]`,或者为数字 lg 数字 2-5 |
|font | string | - | 指定font-family 会覆盖style中设置的font-family |
|color | string | - | 指定color 会覆盖style中设置的color |
|style | object | -| 样式，fontSize、color等等 |
|children | `HtmlElement|string` | - | 包裹内容,可选 |
|other | html property | - | html元素自身属性,如点击事件onClick等 |

## author

ilex.h

## License

MIT

## changelog

* 2021-12-22 v1.1.4 SymbolSvg 添加 `inlineSvg` 模式，支持将 symbol 中的内容，添加至 svg 节点之下。
* 2021-12-10 v1.1.3 修改 SymbolSvg native属性注入，改为注入到外层 span 标签
* 2020-11-27 v1.1.0 修改 icon 支持范围，支持直接传入图片路径

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