vue-iconfonts

A Project For Vue To Use IconFont Intelligently

Usage no npm install needed!

<script type="module">
  import vueIconfonts from 'https://cdn.skypack.dev/vue-iconfonts';
</script>

README

vue-iconfonts

A Project For Vue To Use Iconfont Intelligently.

Installation

$ npm i -S vue-iconfonts

Manual

<!-- Add vue.js dependency to your HTML file first -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<!-- Add vue-iconfonts.js dependency for your browser use then -->
<script src="https://unpkg.com/vue-iconfonts"></script>

Iconfont

Upload your icons(SVG) to your icon project you have created and download it from Iconfont, unzip download.zip.

FontClass

Add iconfont.css to your project for browser use

<head>
  <link rel="stylesheet" href="iconfont.css" />
</head>

Add iconfont.css to your project for vue project use

import "iconfont.css";

Symbol, Svg

Add iconfont.js to your project for browser use

<head>
  <script src="iconfont.js"></script>
</head>

Add iconfont.js to your project for vue project use

import "iconfont.js";

Usage For Vue Project

import Vue from "vue";
import IconFont from "vue-iconfonts";
import "iconfont.css";
import "iconfont.js";

Vue.component("IconFont", IconFont);

<!-- FontClass -->
<div>
  Hello
  <IconFont type="icon" name="hasSelected" color="f00" size="30" /> FontIcon
</div>
<div>
  Hello
  <IconFont type="icon" name="notSelected" color="f00" size="30" /> FontIcon
</div>

<!-- Symbol, Svg -->
<div>
  Hello
  <IconFont type="svg" name="hasSelected" color="f00" size="30" /> SvgIcon
</div>
<div>
  Hello
  <IconFont type="svg" name="notSelected" color="f00" size="30" /> SvgIcon
</div>