Amos-icon NPM | npm.io

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等