amos-icon
v1.1.6
Published
amos icon
Downloads
7
Readme
amos-icon
install
npm install amos-icon
useage
use Icon
该方式以字体图标为主,最终以 i 标签输出
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 中的图标库时,需要自行引入
iconfont.css
文件。
use symbol svg
该方式,最终以 svg 方式输出。该模式下,需要传入 width、height
表示 svg 文件的大小,默认为 1em
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 中的图标库时,需要自行引入
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 支持范围,支持直接传入图片路径