icons.toolkit.vue专为 icons.js 配套的工具箱

icons.toolkit.vue - 专为 icons.js 配套的工具箱。

特点

• 多款免费且设计优美的图标集；


• 提供单个 SVG 图标复制和下载；


• 支持跨图标集选择图标，创建自定义图标集；


• 支持导入第三方 SVG 图标，创建自定义图标集;


• 支持打包下载自定义图标集；


• 支持下载图标集 ES6 模块；

图标集

icons.toolkit.vue 目前以收集了 18 个免费且设计优美的图标集：

1. @yaohaixiao/icons.toolkit.vue/assets/brankic


2. @yaohaixiao/icons.toolkit.vue/assets/broccolidry


3. @yaohaixiao/icons.toolkit.vue/assets/eighty-shades


4. @yaohaixiao/icons.toolkit.vue/assets/entypo


5. @yaohaixiao/icons.toolkit.vue/assets/ever-icons


6. @yaohaixiao/icons.toolkit.vue/assets/feather


7. @yaohaixiao/icons.toolkit.vue/assets/font-awesome


8. @yaohaixiao/icons.toolkit.vue/assets/hawcons


9. @yaohaixiao/icons.toolkit.vue/assets/iconic


10. @yaohaixiao/icons.toolkit.vue/assets/linecons


11. @yaohaixiao/icons.toolkit.vue/assets/material


12. @yaohaixiao/icons.toolkit.vue/assets/meteocons


13. @yaohaixiao/icons.toolkit.vue/assets/steadysets


14. @yaohaixiao/icons.toolkit.vue/assets/typicons


15. @yaohaixiao/icons.toolkit.vue/assets/vicons


16. @yaohaixiao/icons.toolkit.vue/assets/wpzoom


17. @yaohaixiao/icons.toolkit.vue/assets/zondicons


18. @yaohaixiao/icons.toolkit.vue/assets/icons

Usage

icons.toolkit.vue 是 icons.js 配套的工具箱，是其中使用的 BaseIcon 图标组件和图标集绘制功能都是基于 icons.js 提供的功能开发的。

纯 ES6 开发

// 导入 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)

VUE 开发

<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 ICONS from './icons'



const BRANKIC_1979 = {

  title: 'Brankic 1979 图标集',

  designer: 'Brankic1979',

  homepage: 'http://brankic1979.com/icons/',

  license: 'Custom (Free to use)',

  code: 'brankic',

  symbols: ICONS

}

License

JavaScript Code Licensed under MIT License.

API Documentation Licensed under CC BY 3.0