Git Product home page Git Product logo

vue-icon-font's Introduction

vue-icon-font

Build Status Vue 2.x

A iconfont plugin for Vuejs 中文说明

Screenshots

screenshot screenshot screenshot

Installation

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 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">

or

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

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">

or

import './iconfont.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'
<!-- font-class -->
<icon name="account" type="class"></icon>

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

Simple demo here

vue-icon-font's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

vue-icon-font's Issues

Setup Airbrake for your JavaScript application

Install Airbrake in 2 easy steps:

Step 1: Add the library
Include via CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/airbrake-js/0.9.7/client.min.js"></script>

We also support installation via npm and Bower.

Step 2: Copy this config snippet to your app.js file

(You can find your project ID and API KEY with your project's settings):

var airbrake = new airbrakeJs.Client({
  projectId: <Your project ID>,
  projectKey: '<Your project API Key>'
});
airbrake.addFilter(function (notice) {
  notice.context.environment = 'production';
  return notice;
});

Visit official GitHub repo for more info on alternative configurations and advanced options.

import it via vue-cli

Hi,
i met some problem to import vue-icon-font into my project,

i have download it. and use import VueIconFont from 'vue-icon-font' , but when i add these two imports:

import '@/assets/iconfont/iconfont.css'
import '@/assets/iconfont/iconfont.js'

it will show me :
These relative modules were not found:

  • ./iconfont.ttf?t=1505287310793 in ./~/css-loader?{"minimize":false,"sourceMap":false}!./src/assets/iconfont/iconfont.css
  • ./iconfont.eot?t=1505287310793 in ./~/css-loader?{"minimize":false,"sourceMap":false}!./src/assets/iconfont/iconfont.css
  • ./iconfont.svg?t=1505287310793 in ./~/css-loader?{"minimize":false,"sourceMap":false}!./src/assets/iconfont/iconfont.css

无法响应事件

click事件等绑定无法响应

建议:添加
v-on="$listeners"
v-bind="$attrs"

让图标宽高可配置

可以添加一个 width, height 的属性吗? 因为 icon 的宽高不一定是 1:1 的情况?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.