vuejs class
vue-icon-font (vue-icon-font)
A iconfont plugin for Vuejs.
Vuejs的iconfont插件。
安装 (Installation)
NPM(推荐) (NPM (Recommended))
# install dependencies
npm install vue-icon-font
手册 (manual)
# Download `dist/vue-iconfont.js` and include it in your HTML file
<script src="../dist/vue-iconfont.js"></script>
Iconfont资产 (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.
这是Alimama MUX制作的矢量图标管理与交流平台,设计人员可以在此处上传矢量图标,用户可以通过多种格式下载矢量图标,还可以将这些图标翻译成字体以供前端工程师使用。
Download the icons from iconfont.cn, and
upzip download.zip
.从iconfont.cn下载图标,
upzip download.zip
。
字体类 (font-class)
copy
iconfont.css
and font files (.ttf,.eot,.svg,.woff) into your project将
iconfont.css
和字体文件( .ttf, .eot, .svg, .woff)复制到您的项目中
# Include the iconfont.css stylsheet into your <head>
<link rel="stylesheet" href="./iconfont.css">
or
要么
# Import css
import './iconfont.css';
use: <icon name="account" type="class"></icon>
使用: <icon name="account" type="class"></icon>
symbol,svg(默认,推荐) (symbol,svg (Default,Recommended))
copy
iconfont.js
into your project将
iconfont.js
复制到您的项目中
# Include the iconfont.css stylsheet into your <head>
<link rel="stylesheet" href="./iconfont.css">
or
要么
import './iconfont.js';
use: <icon name="password"></icon>
使用: <icon name="password"></icon>
通过导入使用(vue-cli) (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'
<!-- font-class -->
<icon name="account" type="class"></icon>
<!-- symbol,svg -->
<icon name="password"></icon>
翻译自: https://vuejsexamples.com/a-iconfont-plugin-for-vuejs-support-font-class-and-symbol/
vuejs class