<script src="https://cdn.jsdelivr.net/gh/yaohaixiao/icons.js/icons.min.js"></script>

Icons

icons.js 的提供了 60 个内置 svg 图标:

add.svg

app.svg

attachment.svg

auth.svg

branch.svg

chart.svg

clean.svg

clone.svg

close.svg

coding.svg

commit.svg

component.svg

compute.svg

configuration.svg

dashboard.svg

database.svg

delete.svg

down.svg

download.svg

edit.svg

electrocardiogram.svg

error.svg

file-search.svg

file.svg

github.svg

gitlab.svg

hash.svg

help.svg

hexagon-point.svg

homepage.svg

idea.svg

interface.svg

issues.svg

lib.svg

link.svg

logs.svg

menu.svg

merge.svg

message.svg

more.svg

notice.svg

parameters.svg

password.svg

pipeline.svg

power-off.svg

publish.svg

refresh.svg

rocket.svg

save.svg

service.svg

setup.svg

shield.svg

site.svg

structure.svg

uninstall.svg

units.svg

up.svg

update.svg

user.svg

workflow.svg

Methods

icons.js 的提供了 13 个公共方法:

paint([symbols = ''])

Description

paint() 方法用于在页面中绘制 svg sprites 的图标集,以便 createElement() 创建的图标元素可以正确显示。

Parameters

symbols
Type:
String|Array
Default:
''

(可选)单个或者多个 SVG 图标的 symbol。

Returns

Type:
icons

icons 对象,便于链式方法调用。

import icons from '@yaohaixiao/icons.js/icons'
// 或者单独引入 paint 方法
import icons from '@yaohaixiao/icons.js/paint'

const NPM =
  '<symbol id="rdc-icon-npm" viewBox="0 0 2500 2500">' +
  '<path d="M0 0h2500v2500H0z" fill="#c00"></path>' +
  '<path d="M1241.5 268.5h-973v1962.9h972.9V763.5h495v1467.9h495V268.5z" fill="#fff"></path>' +
  '</symbol>'

const ICONS = [
  '<symbol id="rdc-icon-unlink" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1344 14.6172C11.5191 15.0019 12.1428 15.0019 12.5275 14.6172C12.9122 14.2325 12.9122 13.6088 12.5275 13.2241L2.77592 3.47247C2.39123 3.08778 1.76753 3.08778 1.38284 3.47247C0.998145 3.85716 0.998145 4.48086 1.38284 4.86555L2.07938 5.5621L1.73111 5.91037C-0.577036 8.21851 -0.577036 11.9608 1.73111 14.2689C4.03925 16.577 7.78149 16.577 10.0896 14.2689L10.4379 13.9206L11.1344 14.6172ZM9.04482 12.5275L3.47247 6.95518L3.12419 7.30346C1.58543 8.84222 1.58543 11.337 3.12419 12.8758C4.66296 14.4146 7.15778 14.4146 8.69654 12.8758L9.04482 12.5275Z" /></path></symbol>',
  '<symbol id="rdc-icon-npm" viewBox="0 0 2500 2500"><path d="M0 0h2500v2500H0z" fill="#c00"/></path></symbol>'
]

// 不添加参数,绘制默认图标
icons.paint()
paint()

// 参数为 string 类型,追加绘制单个新图标
icons.paint(NPM)
paint(NPM)

// 参数为 array 类型,追加多个图标
icons.paint(ICONS)
paint(ICONS)

createElement(name[, options])

Description

createElement() 方法用于创建显示 svg 图标 DOM 元素。

Parameters

name
Type:
String
Default:
''

(必须)当前图标集中的图标名称或者完整的 SVG 图标字符串。

options
Type:
Object
Default:
{}

(可选)创建 SVG 图标需要的参数对象。

  • options.size:可选,用来指定 icon 图标大小。number 和 string 类型时,可选值为 0 以上的整数, 宽度和高度值相等;array时数组长度为 2,分别代表宽度和高度;
  • options.color:可选,用来指定 icon 图标颜色。
  • options.iconSet:可选,用来指定 icon 图标集的名称。默认值:'icon'
  • options.attrs:可选,给创建的 icons 元素设置的 HTML 属性对象。

Returns

Type:
HTMLElement

返回创建的 SVG 图标 DOM 元素。

import icons from '@yaohaixiao/icons.js/icons'
// 或者引入独立方法
import createElement from '@yaohaixiao/icons.js/createElement'

const $up = document.querySelector('#up')
const $down = document.querySelector('#down')
const $home = document.querySelector('#home')

icons.paint()

// 使用 icon() 方法创建一个包含显示 up 图标的 i 标签:
const $iconUp = icons.createElement('up')
// 在 id="up" 的工具栏按钮中显示向上图标
$up.appendChild($iconUp)

// 传递 icons 参数,控制图标样式
const $iconDown = createElement('down', {
  size: 24, // [24, 26]
  color: '#f00',
  iconSet: 'rdc'
})
$down.appendChild($iconDown)

const svg = '<svg viewBox="0 0 16 16">’ + ' +
        '<path d="M16 9.5l-3-3v-4.5h-2v2.5l-3-3-8 8v0.5h2v5h5v-3h2v3h5v-5h2z"></path>‘ +' +
        '</svg>'
// 传递 icons 参数,控制图标样式
const $iconHome = createElement(svg, {
  size: 24, // [24, 26]
  color: '#f00',
  iconSet: 'rdc',
  // 设置图标的 HTML 属性,只要是 DOM.setAttribute 支持的 HTML 都可以
  attrs: {
    // 添加交互或者计算需要的 data 属性值
    'data-icon': 'custom-icon',
    // 创建的 svg DOM 元素的完整className = 'ijs-icon custom-icon'
    // 会自动添加上 icons.js 自带的 ijs-icon 默认的 className
    className: 'custom-icon'
  }
})
$home.appendChild($iconHome)

icon(name[, options])

Description

icon() 方法用于创建显示 svg 图标 DOM 元素,是 createElement() 方法的别名。

Parameters

name
Type:
String
Default:
''

(必须)当前图标集中的图标名称或者完整的 SVG 图标字符串。

options
Type:
Object
Default:
{}

(可选)创建 SVG 图标需要的参数对象。

  • options.size:可选,用来指定 icon 图标大小。number 和 string 类型时,可选值为 0 以上的整数, 宽度和高度值相等;array时数组长度为 2,分别代表宽度和高度;
  • options.color:可选,用来指定 icon 图标颜色。
  • options.iconSet:可选,用来指定 icon 图标集的名称。默认值:'icon'
  • options.attrs:可选,给创建的 icons 元素设置的 HTML 属性对象。

Returns

Type:
HTMLElement

返回创建的 SVG 图标 DOM 元素。

import icons from '@yaohaixiao/icons.js/icons'
// 或者引入独立方法
import icon from '@yaohaixiao/icons.js/createElement'

const $up = document.querySelector('#up')
const $down = document.querySelector('#down')
const $home = document.querySelector('#home')

icons.paint()

// 使用 icon() 方法创建一个包含显示 up 图标的 i 标签:
const $iconUp = icons.icon('up')
// 在 id="up" 的工具栏按钮中显示向上图标
$up.appendChild($iconUp)

// 传递 icons 参数,控制图标样式
const $iconDown = icon('down', {
  size: 24, // [24, 26]
  color: '#f00',
  iconSet: 'rdc'
})
$down.appendChild($iconDown)

const svg = '<svg viewBox="0 0 16 16">’ + ' +
          '<path d="M16 9.5l-3-3v-4.5h-2v2.5l-3-3-8 8v0.5h2v5h5v-3h2v3h5v-5h2z"></path>‘ +' +
        '</svg>'
// 传递 icons 参数,控制图标样式
const $iconHome = icon(svg, {
  size: 24, // [24, 26]
  color: '#f00',
  iconSet: 'rdc',
  // 设置图标的 HTML 属性,只要是 DOM.setAttribute 支持的 HTML 都可以
  attrs: {
    // 添加交互或者计算需要的 data 属性值
    'data-icon': 'custom-icon',
    // 创建的 svg DOM 元素的完整className = 'ijs-icon custom-icon'
    // 会自动添加上 icons.js 自带的 ijs-icon 默认的 className
    className: 'custom-icon'
  }
})
$home.appendChild($iconHome)

appendTo(el, name[, options])

Description

appendTo() 方法用于创建显示 svg 图标 DOM 元素,并添加到指定的 el DOM 元素。

Parameters

el
Type:
String|HTMLElement
Default:
''

(必须)希望显示图标的 DOM 元素或者 DOM 元素的选择器。

name
Type:
String
Default:
''

(必须)当前图标集中的图标名称或者完整的 SVG 图标字符串。

options
Type:
Object
Default:
{}

(可选)创建 SVG 图标需要的参数对象。

  • options.size:可选,用来指定 icon 图标大小。number 和 string 类型时,可选值为 0 以上的整数, 宽度和高度值相等;array时数组长度为 2,分别代表宽度和高度;
  • options.color:可选,用来指定 icon 图标颜色。
  • options.iconSet:可选,用来指定 icon 图标集的名称。默认值:'icon'
  • options.attrs:可选,给创建的 icons 元素设置的 HTML 属性对象。

Returns

Type:
icons

icons 对象,以便链式调用。

import icons from '@yaohaixiao/icons.js/icons'
// 或者引入独立方法
import createElement from '@yaohaixiao/icons.js/createElement'

icons.paint()

// 使用默认参数
icons.appendTo('#up', 'up')
// 自定义参数
appendTo('#down', 'down', {
  size: 24, // [24, 26]
  color: '#f00',
  iconSet: 'rdc'
})

// 使用 SVG 图标字符串
const svg = '<svg viewBox="0 0 16 16">’ + ' +
        '<path d="M16 9.5l-3-3v-4.5h-2v2.5l-3-3-8 8v0.5h2v5h5v-3h2v3h5v-5h2z"></path>‘ +' +
        '</svg>'
appendTo('#tips', svg)

add(symbol)

Description

add() 方法用于先现有图标集中添加 svg 图标 symbol 数据。

Parameters

symbol
Type:
String|Array
Default:
''

(必须)单个或者多个图标 symbol 数组。

Returns

Type:
icons

icons 对象,以便链式调用。

import icons from '@yaohaixiao/icons.js/icons'
// 或者引入独立方法
import add from '@yaohaixiao/icons.js/add'

const ICONS = [
  '<symbol id="rdc-icon-unlink" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1344 14.6172C11.5191 15.0019 12.1428 15.0019 12.5275 14.6172C12.9122 14.2325 12.9122 13.6088 12.5275 13.2241L2.77592 3.47247C2.39123 3.08778 1.76753 3.08778 1.38284 3.47247C0.998145 3.85716 0.998145 4.48086 1.38284 4.86555L2.07938 5.5621L1.73111 5.91037C-0.577036 8.21851 -0.577036 11.9608 1.73111 14.2689C4.03925 16.577 7.78149 16.577 10.0896 14.2689L10.4379 13.9206L11.1344 14.6172ZM9.04482 12.5275L3.47247 6.95518L3.12419 7.30346C1.58543 8.84222 1.58543 11.337 3.12419 12.8758C4.66296 14.4146 7.15778 14.4146 8.69654 12.8758L9.04482 12.5275Z" /></path></symbol>',
  '<symbol id="rdc-icon-npm" viewBox="0 0 2500 2500"><path d="M0 0h2500v2500H0z" fill="#c00"/></path></symbol>'
]
const DELETE = '<symbol id="rdc-icon-delete" viewBox="0 0 1024 1024"><path d="M732.48 724.288a33.792 33.792 0 0 1-48.448 0l-182.976-184.32-185.664 183.68a34.56 34.56 0 0 1-49.152 0 33.792 33.792 0 0 1 0-48.512l186.368-184.32L276.48 314.688a33.792 33.792 0 0 1 0-48.448 33.792 33.792 0 0 1 48.448 0L501.12 443.072l178.88-176.832a34.56 34.56 0 0 1 49.152 0 33.792 33.792 0 0 1 0 48.448L549.568 492.224l182.272 183.616a34.432 34.432 0 0 1 0.64 48.448z"></path></symbol>'

// 参数为 array 类型,追加多个图标
// 追加绘制 NPM 图标
icons.add(ICONS)
add(DELETE)

remove()

Description

remove() 方法用于删除现有图标集中的与给定 name 同名的图标。

Parameters

name
Type:
String
Default:
''

(必须)当前图标集中的图标名。

icons
Type:
String
Default:
'icon'

(可选)图标集名称。

Returns

Type:
icons

icons 对象,便于链式方法调用。

import icons from '@yaohaixiao/icons.js/icons'
// 或者引入独立方法
import remove from '@yaohaixiao/icons.js/remove'

const ICONS = [
  '<symbol id="rdc-icon-unlink" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1344 14.6172C11.5191 15.0019 12.1428 15.0019 12.5275 14.6172C12.9122 14.2325 12.9122 13.6088 12.5275 13.2241L2.77592 3.47247C2.39123 3.08778 1.76753 3.08778 1.38284 3.47247C0.998145 3.85716 0.998145 4.48086 1.38284 4.86555L2.07938 5.5621L1.73111 5.91037C-0.577036 8.21851 -0.577036 11.9608 1.73111 14.2689C4.03925 16.577 7.78149 16.577 10.0896 14.2689L10.4379 13.9206L11.1344 14.6172ZM9.04482 12.5275L3.47247 6.95518L3.12419 7.30346C1.58543 8.84222 1.58543 11.337 3.12419 12.8758C4.66296 14.4146 7.15778 14.4146 8.69654 12.8758L9.04482 12.5275Z" /></path></symbol>',
  '<symbol id="rdc-icon-npm" viewBox="0 0 2500 2500"><path d="M0 0h2500v2500H0z" fill="#c00"/></path></symbol>'
]

// 参数为 array 类型,追加多个图标
// 追加绘制 NPM 图标
icons.paint(ICONS)

// 移除 up 图标
icons.remove('up')
// 移除 tips 图标
remove('tips', 'rdc')

clear()

Description

clear() 方法用于清理在页面中绘制 svg sprites 的图标集,会移除图标集 DOM 元素。同时将图标集数据恢复为初始默认的 60 个图标。

Returns

Type:
icons

icons 对象,便于链式方法调用。

import icons from '@yaohaixiao/icons.js/icons'
// 或者引入独立方法
import clear from '@yaohaixiao/icons.js/clear'

const ICONS = [
  '<symbol id="rdc-icon-unlink" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1344 14.6172C11.5191 15.0019 12.1428 15.0019 12.5275 14.6172C12.9122 14.2325 12.9122 13.6088 12.5275 13.2241L2.77592 3.47247C2.39123 3.08778 1.76753 3.08778 1.38284 3.47247C0.998145 3.85716 0.998145 4.48086 1.38284 4.86555L2.07938 5.5621L1.73111 5.91037C-0.577036 8.21851 -0.577036 11.9608 1.73111 14.2689C4.03925 16.577 7.78149 16.577 10.0896 14.2689L10.4379 13.9206L11.1344 14.6172ZM9.04482 12.5275L3.47247 6.95518L3.12419 7.30346C1.58543 8.84222 1.58543 11.337 3.12419 12.8758C4.66296 14.4146 7.15778 14.4146 8.69654 12.8758L9.04482 12.5275Z" /></path></symbol>',
  '<symbol id="rdc-icon-npm" viewBox="0 0 2500 2500"><path d="M0 0h2500v2500H0z" fill="#c00"/></path></symbol>'
]

// 参数为 array 类型,追加多个图标
// 追加绘制 NPM 图标
icons.paint(ICONS)
// 将移除图标集元素
icons.clear()

// 再次绘制图标集元素,之前追加的2个图标已经清除
icons.paint()

getSymbol(name[, iconSet='icon'])

Description

getSymbol() 方法用于获取先现有图标集中单个 symbol 数据。

Parameters

name
Type:
String
Default:
''

(可选)当前图标集中的图标名。

icons
Type:
String
Default:
'icon'

(可选)图标集名称。

Returns

Type:
icons

icons 对象,便于链式方法调用。

import icons from '@yaohaixiao/icons.js/icons'
// 或者引入独立方法
import getSymbol from '@yaohaixiao/icons.js/getSymbol'

const ICONS = [
  '<symbol id="rdc-icon-unlink" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1344 14.6172C11.5191 15.0019 12.1428 15.0019 12.5275 14.6172C12.9122 14.2325 12.9122 13.6088 12.5275 13.2241L2.77592 3.47247C2.39123 3.08778 1.76753 3.08778 1.38284 3.47247C0.998145 3.85716 0.998145 4.48086 1.38284 4.86555L2.07938 5.5621L1.73111 5.91037C-0.577036 8.21851 -0.577036 11.9608 1.73111 14.2689C4.03925 16.577 7.78149 16.577 10.0896 14.2689L10.4379 13.9206L11.1344 14.6172ZM9.04482 12.5275L3.47247 6.95518L3.12419 7.30346C1.58543 8.84222 1.58543 11.337 3.12419 12.8758C4.66296 14.4146 7.15778 14.4146 8.69654 12.8758L9.04482 12.5275Z" /></path></symbol>',
  '<symbol id="rdc-icon-npm" viewBox="0 0 2500 2500"><path d="M0 0h2500v2500H0z" fill="#c00"/></path></symbol>'
]

// 参数为 array 类型,追加多个图标
// 追加绘制 NPM 图标
icons.add(ICONS)

icons.getSymbol('up')
symbols('npm', 'rdc')
symbols('unlink', 'rdc')

getSymbolName(symbol, isFull)

Description

getSymbolName() 方法用于获取 symbol 图标字符串中的 id 数据。

Parameters

symbol
Type:
String

(必须)symbol 图标字符串。

isFull
Type:
Boolean
Default:
false

(可选)是否获取全名。

Returns

Type:
String

symbol 图标字符串中的 id 数据。

import icons from '@yaohaixiao/icons.js/icons'
// 或者引入独立方法
import getSymbolName from '@yaohaixiao/icons.js/getSymbolName'

const ICONS = [
  '<symbol id="icon-unlink" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1344 14.6172C11.5191 15.0019 12.1428 15.0019 12.5275 14.6172C12.9122 14.2325 12.9122 13.6088 12.5275 13.2241L2.77592 3.47247C2.39123 3.08778 1.76753 3.08778 1.38284 3.47247C0.998145 3.85716 0.998145 4.48086 1.38284 4.86555L2.07938 5.5621L1.73111 5.91037C-0.577036 8.21851 -0.577036 11.9608 1.73111 14.2689C4.03925 16.577 7.78149 16.577 10.0896 14.2689L10.4379 13.9206L11.1344 14.6172ZM9.04482 12.5275L3.47247 6.95518L3.12419 7.30346C1.58543 8.84222 1.58543 11.337 3.12419 12.8758C4.66296 14.4146 7.15778 14.4146 8.69654 12.8758L9.04482 12.5275Z" /></path></symbol>',
  '<symbol id="rdc-icon-npm" viewBox="0 0 2500 2500"><path d="M0 0h2500v2500H0z" fill="#c00"/></path></symbol>'
]

icons.getSymbolName(ICONS[0]) // -> 'unlock'
getSymbolName(ICONS[1]) // -> 'rdc-icon-npm'

getSymbolPath(name[, iconSet='icon'])

Description

getSymbolPath() 方法用于内置的图标 symbol 字符串中的 path 信息,或者获取自定义 symbol 图标字符串中的 path 信息。

Parameters

symbol
Type:
String

(必须)name 名称或者 symbol 图标字符串。

iconSet
Type:
String
Default:
'icon'

(可选)指定图标集名称。

Returns

Type:
String

symbol 图标字符串中的 path 信息。

import ICONS from '@/assets/icons'
import icons from '@yaohaixiao/icons.js/icons'
// 或者引入独立方法
import getSymbolPath from '@yaohaixiao/icons.js/getSymbolPath'

icons.paint(ICONS)

const ICONS = [
  '<symbol id="icon-unlink" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1344 14.6172C11.5191 15.0019 12.1428 15.0019 12.5275 14.6172C12.9122 14.2325 12.9122 13.6088 12.5275 13.2241L2.77592 3.47247C2.39123 3.08778 1.76753 3.08778 1.38284 3.47247C0.998145 3.85716 0.998145 4.48086 1.38284 4.86555L2.07938 5.5621L1.73111 5.91037C-0.577036 8.21851 -0.577036 11.9608 1.73111 14.2689C4.03925 16.577 7.78149 16.577 10.0896 14.2689L10.4379 13.9206L11.1344 14.6172ZM9.04482 12.5275L3.47247 6.95518L3.12419 7.30346C1.58543 8.84222 1.58543 11.337 3.12419 12.8758C4.66296 14.4146 7.15778 14.4146 8.69654 12.8758L9.04482 12.5275Z" /></path></symbol>',
  '<symbol id="rdc-icon-npm" viewBox="0 0 2500 2500"><path d="M0 0h2500v2500H0z" fill="#c00"/></path></symbol>'
]

icons.getSymbolPath('up')
// -> '<path d="M494.784 261.696c0.832-0.448 1.536-1.216 2.368-1.536a38.72 38.72 0 0 1 46.08 8.256l277.824 302.272a41.92 41.92 0 0 1-1.536 58.048 39.104 39.104 0 0 1-56.448-1.6L513.728 355.904 260.736 626.048a39.104 39.104 0 0 1-56.448 1.088 41.6 41.6 0 0 1-1.088-57.984L483.84 269.696c0.512-0.512 1.344-0.768 1.92-1.408l1.088-1.344c2.368-2.496 5.312-3.648 8-5.248z"></path>'

getSymbolPath(ICONS[1])
// -> '<path d="M0 0h2500v2500H0z" fill="#c00"/><path d="M1241.5 268.5h-973v1962.9h972.9V763.5h495v1467.9h495V268.5z" fill="#fff"></path>'

getSymbolSize(name[, iconSet='icon'])

Description

getSymbolSize() 方法用于内置的图标 symbol 字符串中的尺寸大小信息,或者获取自定义 symbol 图标字符串中的尺寸大小信息。

Parameters

symbol
Type:
String

(必须)name 名称或者 symbol 图标字符串。

iconSet
Type:
String
Default:
'icon'

(可选)指定图标集名称。

Returns

Type:
String

symbol 图标字符串中的尺寸大小信息。

import ICONS from '@/assets/icons'
import icons from '@yaohaixiao/icons.js/icons'
// 或者引入独立方法
import getSymbolSize from '@yaohaixiao/icons.js/getSymbolSize'

icons.paint(ICONS)

const ICONS = [
  '<symbol id="icon-unlink" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1344 14.6172C11.5191 15.0019 12.1428 15.0019 12.5275 14.6172C12.9122 14.2325 12.9122 13.6088 12.5275 13.2241L2.77592 3.47247C2.39123 3.08778 1.76753 3.08778 1.38284 3.47247C0.998145 3.85716 0.998145 4.48086 1.38284 4.86555L2.07938 5.5621L1.73111 5.91037C-0.577036 8.21851 -0.577036 11.9608 1.73111 14.2689C4.03925 16.577 7.78149 16.577 10.0896 14.2689L10.4379 13.9206L11.1344 14.6172ZM9.04482 12.5275L3.47247 6.95518L3.12419 7.30346C1.58543 8.84222 1.58543 11.337 3.12419 12.8758C4.66296 14.4146 7.15778 14.4146 8.69654 12.8758L9.04482 12.5275Z" /></path></symbol>',
  '<symbol id="rdc-icon-npm" viewBox="0 0 2500 2500"><path d="M0 0h2500v2500H0z" fill="#c00"/></path></symbol>'
]

icons.getSymbolSize('up') // -> { width: 1024, height: 1024 }
getSymbolPath(ICONS[0]) // -> { width: 16, height: 16 }
getSymbolPath(ICONS[1]) // -> { width: 2500, height: 2500 }

symbols([name, iconSet='icon'])

Description

symbols() 方法用于获取先现有图标集中单个或者全部 svg 图标 symbol 数据。

Parameters

name
Type:
String|Array
Default:
''

(可选)当前图标集中的图标名或者多个图标名(数组)。

icons
Type:
String
Default:
'icon'

(可选)图标集名称。

Returns

Type:
icons

icons 对象,便于链式方法调用。

import icons from '@yaohaixiao/icons.js/icons'
// 或者引入独立方法
import symbols from '@yaohaixiao/icons.js/symbols'

const ICONS = [
  '<symbol id="rdc-icon-unlink" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1344 14.6172C11.5191 15.0019 12.1428 15.0019 12.5275 14.6172C12.9122 14.2325 12.9122 13.6088 12.5275 13.2241L2.77592 3.47247C2.39123 3.08778 1.76753 3.08778 1.38284 3.47247C0.998145 3.85716 0.998145 4.48086 1.38284 4.86555L2.07938 5.5621L1.73111 5.91037C-0.577036 8.21851 -0.577036 11.9608 1.73111 14.2689C4.03925 16.577 7.78149 16.577 10.0896 14.2689L10.4379 13.9206L11.1344 14.6172ZM9.04482 12.5275L3.47247 6.95518L3.12419 7.30346C1.58543 8.84222 1.58543 11.337 3.12419 12.8758C4.66296 14.4146 7.15778 14.4146 8.69654 12.8758L9.04482 12.5275Z" /></path></symbol>',
  '<symbol id="rdc-icon-npm" viewBox="0 0 2500 2500"><path d="M0 0h2500v2500H0z" fill="#c00"/></path></symbol>'
]

// 参数为 array 类型,追加多个图标
// 追加绘制 NPM 图标
icons.add(ICONS)

// 获取全部
icons.symbols()
// 获取单个(只能获取默认图标集中的数据)
symbols('up')
// 获取单个,指定图标集
symbols('unlink', 'rdc')

count()

Description

count() 方法专门用来获取图标集图标数量。

Returns

Type:
Number

返回目前图标集中图标的数量。

import icons from '@yaohaixiao/icons.js/icons'
// 或者引入独立方法
import count from '@yaohaixiao/icons.js/clear'

const ICONS = [
  '<symbol id="rdc-icon-unlink" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1344 14.6172C11.5191 15.0019 12.1428 15.0019 12.5275 14.6172C12.9122 14.2325 12.9122 13.6088 12.5275 13.2241L2.77592 3.47247C2.39123 3.08778 1.76753 3.08778 1.38284 3.47247C0.998145 3.85716 0.998145 4.48086 1.38284 4.86555L2.07938 5.5621L1.73111 5.91037C-0.577036 8.21851 -0.577036 11.9608 1.73111 14.2689C4.03925 16.577 7.78149 16.577 10.0896 14.2689L10.4379 13.9206L11.1344 14.6172ZM9.04482 12.5275L3.47247 6.95518L3.12419 7.30346C1.58543 8.84222 1.58543 11.337 3.12419 12.8758C4.66296 14.4146 7.15778 14.4146 8.69654 12.8758L9.04482 12.5275Z" /></path></symbol>',
  '<symbol id="rdc-icon-npm" viewBox="0 0 2500 2500"><path d="M0 0h2500v2500H0z" fill="#c00"/></path></symbol>'
]

icons.paint()
// 默认 60 个图标
console.log(icons.count()) // -> 60

// 追加2个图标
icons.paint(ICONS)
console.log(count()) // -> 62