代码拉取完成,页面将自动刷新
icons.toolkit.vue - 专为 icons.js 配套的工具箱。
icons.toolkit.vue 目前以收集了 18 个免费且设计优美的图标集:
icons.toolkit.vue 是 icons.js 配套的工具箱,是其中使用的 BaseIcon 图标组件和图标集绘制功能都是基于 icons.js 提供的功能开发的。
// 导入 icons.js 中可以直接使用的 symbols 数据
import ICONS from '@yaohaixiao/icons.toolkit.vue/assets/brankic/icons'
// 导入 icons.js 的功能函数
import paint from '@yaohaixiao/icons.js/paint'
import icon from '@yaohaixiao/icons.js/icon'
// 绘制 svg sprites 图标集
paint(ICONS)
// 创建 svg 图标的 DOM 元素
const $icon = icon('up')
// 将图标绘制到指定的按钮内
document.querySelector('#button__up').appendChild($icon)
<template>
<icon name="up" :size="32" />
</template>
// 导入 icons.js 中可以直接使用的 symbols 数据
import ICONS from '@yaohaixiao/icons.js-toolkit/assets/brankic/icons'
// 导入 icons.js 的 Icon 组件
import Icon from '@yaohaixiao/icons.js/components/Icon'
// 绘制 svg sprites 图标集
paint(ICONS)
export default {
name: 'XXXPage',
components: {
Icon
},
// ... 省略其他
}
icons.js-toolkit 中除了提供 symbols 数组格式的数据,还有图标集:
// 导入图标
import BRANKIC from '@yaohaixiao/icons.js-toolkit/assets/brankic'
其数据格式如下:
// 导入图标
import ICONS from './icons'
const BRANKIC = {
title: 'Brankic 1979 图标集',
designer: 'Brankic1979',
homepage: 'http://brankic1979.com/icons/',
license: 'Custom (Free to use)',
code: 'brankic',
symbols: ICONS
}
JavaScript Code Licensed under MIT License.
API Documentation Licensed under CC BY 3.0
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。