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