All Projects → fjc0k → vue-iconfont

fjc0k / vue-iconfont

Licence: MIT License
更优雅地使用 Iconfont.cn,同时支持 font-class 引入和 symbol 引入。

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to vue-iconfont

Svgtofont
Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font.
Stars: ✭ 149 (+451.85%)
Mutual labels:  font, svg-icons, icon
Coreui Icons
CoreUI Free Icons - Premium designed free icon set with marks in SVG, Webfont and raster formats
Stars: ✭ 1,813 (+6614.81%)
Mutual labels:  font, svg-icons, iconfont
Svelte Awesome
Awesome SVG icon component for Svelte JS, built with Font Awesome icons. Based on Justineo/vue-awesome
Stars: ✭ 193 (+614.81%)
Mutual labels:  font, icon
Eficonfont
Yet another stupid wrapper of icon font.
Stars: ✭ 200 (+640.74%)
Mutual labels:  font, icon
fontagon
Fontagon is a great tool that easily converts svg into icon font. Fontagon-cli allows faster conversion to commands.
Stars: ✭ 18 (-33.33%)
Mutual labels:  font, icon
svg-fixer
Converts SVG Strokes To Fill.
Stars: ✭ 59 (+118.52%)
Mutual labels:  font, svg-icons
Webfont
Awesome generator of webfont
Stars: ✭ 170 (+529.63%)
Mutual labels:  font, svg-icons
react-svg-icon-generator
Generate React Icon Component from SVG icons to show, resize and recolor them.
Stars: ✭ 65 (+140.74%)
Mutual labels:  svg-icons, icon
Yii2 Widget Rating
A Yii2 widget for the simple yet powerful bootstrap-star-rating plugin with fractional rating support (sub repo split from yii2-widgets)
Stars: ✭ 47 (+74.07%)
Mutual labels:  font, icon
svg-gobbler
Open source browser extension that makes designing and developing easier by finding, processing, exporting, optimizing, and managing SVG content.
Stars: ✭ 272 (+907.41%)
Mutual labels:  svg-icons, icon
react-iconfont-cli
转换iconfont图标为React标准组件,不依赖字体,支持多色彩
Stars: ✭ 58 (+114.81%)
Mutual labels:  icon, iconfont
tasarimcilar-ve-yazilimcilar-icin-kaynak-arsivim
Tasarım ve yazılım ile ilgili 2017 yılından günümüze kadar geçen zamanda toplamış olduğum arşivimi sizle ile paylaşıyorum. Ne mi var her şey...
Stars: ✭ 276 (+922.22%)
Mutual labels:  font, icon
Linearicons
Linearicons is the highest quality set of line icons, matching with minimalist UI designs in iOS.
Stars: ✭ 64 (+137.04%)
Mutual labels:  font, icon
Fontello Svg
Generate SVG icons from a Fontello icon set.
Stars: ✭ 59 (+118.52%)
Mutual labels:  font, icon
qpage
👨‍💻 Free Project For Creating Academic Homepage Without Any Code In 3min
Stars: ✭ 87 (+222.22%)
Mutual labels:  font, icon
Font Awesome
The iconic SVG, font, and CSS toolkit
Stars: ✭ 66,937 (+247814.81%)
Mutual labels:  font, svg-icons
Alfred Font Awesome Workflow
🎩 Font Awesome workflow for Alfred
Stars: ✭ 714 (+2544.44%)
Mutual labels:  font, svg-icons
Unicons
1000+ Pixel-perfect vector icons and Iconfont for your next project.
Stars: ✭ 911 (+3274.07%)
Mutual labels:  font, svg-icons
font-gis
Icon font and SVG for use with GIS and spatial analysis tools
Stars: ✭ 121 (+348.15%)
Mutual labels:  font, svg-icons
archer-svgs
异步加载svg解决方案
Stars: ✭ 23 (-14.81%)
Mutual labels:  svg-icons, icon

Vue Iconfont

Travis codecov minified size minzipped size

更优雅地使用 Iconfont.cn,同时支持 font-class 引入symbol 引入

安装

# Yarn
yarn add vue-iconfont

# npm
npm i vue-iconfont

CDN:jsDelivr | UNPKG (可通过 window.VueIconfont 使用)

使用

首先用 Vue.use 安装 VueIconfont

import Vue from 'vue'
import VueIconfont from 'vue-iconfont'

Vue.use(VueIconfont/*, options*/)

// ......

然后就可以在组件中这样使用:

<icon name="right" />

options

选项 类型 默认值 说明
tag String icon 图标组件的标签。
type font | svg font font:表示用 font-class 引入的字体图标。
svg:表示用 symbol 引入的 SVG 图标。
prefix String - 表示类名前缀或 SVG 图标名称前缀。
family String = prefix 仅当 typefont 时有效,表示设置了 font-family 样式的类。
sprite String - 仅当 typesvg 时有效,表示 SVG Sprite,其会被自动加载,形如:<svg><symbol id="ok">......</symbol></svg>
component { name: String, 'props': Object, beforeRender: context => void } { name: 'Icon', 'props': {}, beforeRender: () => {} } name 表示组件的 name 选项,props 表示组件的 props 选项,beforeRender 是一个函数,它接收 Vue 函数组件中 render 的 context,你可以对 context 施加改变。

完整实例

项目配置

  1. 打开 iconfont.cn图标管理 > 我的项目,选择一个项目。

  2. 点击 更多操作 > 编辑项目

  1. FontClass/Symbol 前缀Font Family 表单项设为同一个值,这个值就是上面 options 中的 prefix

  1. 点击 下载至本地 将图标文件下载解压到项目文件夹中。

安装

你可以使用 Vue.use(VueIconfont, [options1, options2, ..., optionsN]) 按需定义不同的图标组件。

// index.js
import Vue from 'vue'
import VueIconfont from 'vue-iconfont'
import App from './app.vue'

// 引入上面下载得到的使用 font-class 图标必须的 css 文件
import './iconfont/iconfont.css'

// 引入上面下载得到的使用 SVG 图标必须的 js 文件
import './iconfont/iconfont.js'

Vue.use(VueIconfont, [
  // 定义 v-icon 组件以使用 font-class 图标
  {
    tag: 'v-icon',
    prefix: 'v-icon',
    type: 'font'
  },

  // 定义 v-svg-icon 组件以使用 SVG 图标
  {
    tag: 'v-svg-icon',
    prefix: 'v-icon',
    type: 'svg'
  }
])

new Vue({
  el: '#app',
  render: h => h(App)
})

使用

<!-- app.vue -->
<template>
  <div>
    <v-icon name="right" />
    <v-svg-icon name="right" />
  </div>
</template>

如何设置图标颜色、大小等?

直接设置其 CSS 即可:

<v-icon name="right" style="color: red; font-size: 2em;" />
<v-svg-icon name="right" style="color: blue; font-size: 14px;" />
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].