vue-icon-font

A iconfont plugin for Vuejs.

vue-icon-font2

vue-icon-font1

vue-icon-font

Installation

NPM (Recommended)

# install dependencies
npm install vue-icon-font
Bash

manual

# Download `dist/vue-iconfont.js` and include it in your HTML file
<script src="../dist/vue-iconfont.js"></script>
HTML

Iconfont assets

It’s a Vector Icon Management & Communication Platform made by Alimama MUX, designers could upload vector icons here, and users could download it by several kinds of format.Also, the icons could be translated into Fonts for front-end engineers’ usage.
screenshot

Download the icons from iconfont.cn, and upzip download.zip.

font-class

copy iconfont.css and font files (.ttf,.eot,.svg,.woff) into your project

# Include the iconfont.css stylsheet into your <head>
<link rel="stylesheet" href="./iconfont.css">
HTML

or

# Import css
import './iconfont.css';
Js

use: <icon name="account" type="class"></icon>

symbol,svg (Default,Recommended)

copy iconfont.js into your project

# Include the iconfont.css stylsheet into your <head>
<link rel="stylesheet" href="./iconfont.css">
HTML

or

import './iconfont.js';
Js

use: <icon name="password"></icon>

Usage via import (vue-cli)

import Vue from 'vue'
import VueIconFont from 'vue-icon-font'
Vue.use(VueIconFont)

/* font-class */
import '@/assets/iconfont/iconfont.css'

/* symbol,svg */
import '@/assets/iconfont/iconfont.js'
Js
<!-- font-class -->
<icon name="account" type="class"></icon>

<!-- symbol,svg -->
<icon name="password"></icon>
HTML

GitHub

ganl/vue-icon-font

2710

IconFont plugin for Vuejs — Read More

https://ganl.github.io/vue-icon-font/demo/

Latest commit to the master branch on 1-26-2020
Download as zip