icons.toolkit.vue - 专为 icons.js 配套的工具箱。
- 多款免费且设计优美的图标集;
- 提供单个 SVG 图标复制和下载;
- 支持跨图标集选择图标,创建自定义图标集;
- 支持导入第三方 SVG 图标,创建自定义图标集;
- 支持打包下载自定义图标集;
- 支持下载图标集 ES6 模块;
icons.toolkit.vue 目前以收集了 18 个免费且设计优美的图标集:
- @yaohaixiao/icons.toolkit.vue/assets/brankic
- @yaohaixiao/icons.toolkit.vue/assets/broccolidry
- @yaohaixiao/icons.toolkit.vue/assets/eighty-shades
- @yaohaixiao/icons.toolkit.vue/assets/entypo
- @yaohaixiao/icons.toolkit.vue/assets/ever-icons
- @yaohaixiao/icons.toolkit.vue/assets/feather
- @yaohaixiao/icons.toolkit.vue/assets/font-awesome
- @yaohaixiao/icons.toolkit.vue/assets/hawcons
- @yaohaixiao/icons.toolkit.vue/assets/iconic
- @yaohaixiao/icons.toolkit.vue/assets/linecons
- @yaohaixiao/icons.toolkit.vue/assets/material
- @yaohaixiao/icons.toolkit.vue/assets/meteocons
- @yaohaixiao/icons.toolkit.vue/assets/steadysets
- @yaohaixiao/icons.toolkit.vue/assets/typicons
- @yaohaixiao/icons.toolkit.vue/assets/vicons
- @yaohaixiao/icons.toolkit.vue/assets/wpzoom
- @yaohaixiao/icons.toolkit.vue/assets/zondicons
- @yaohaixiao/icons.toolkit.vue/assets/icons
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