amos-icon

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`	-
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 支持范围，支持直接传入图片路径