About the use of vue-fontawesome in vue.js

This article mainly introduces the use of vue-fontawesome in the vue.js series. Friends who need it can refer to it

Preface to Toss

Currently, I mainly use the vue.js framework for development. I don’t know much about vue, and I am still half-baked, so I have to step up and get familiar with it quickly. I have been using scaffolding in the past two daysvue-cli While creating projects and playing around, I have been persevering in font-awesome. Through github, I learned that a big guy has already created vue-awesome, so I started to mess around with it...

Not much nonsense. Say, let’s do it!

Preparation

This is the author's github address: Airplane

In order to demonstrate the complete steps, use scaffolding to create a new project

Creating...

Take the opportunity to chat a few words

The advantage of using this method is that you can customize any icon yourself, that is, output it in svg format. Then register an icon through Icon.register. The registration method is as follows:

If there are many icons, there may be a large number of svg tags scattered in the DOM. I don’t know if this is a disadvantage. With.

Icon.register({
 'chevron-right': {
  'width': 1280,
  'height': 1792,
  'paths': [{
   'd': 'M1107 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'
  }]
 }
});

chevron-right This is the name of the icon. When using it, use

<icon name="chevron-right"></icon> Use it. As for the style, just define it normally.

paths contains the path information when drawing svg of the icon

The installation is OK, let’s get to the point...

Preparation work:

• Install vue-awesome

$ npm install vue-awesome --save

This simple installation is complete OK.

Result preview

Looking from the picture, the icon is actually an svg tag at the end

##icon Storage directory

$ cd src/
$ mkdir icons && cmod

icon component

Custom labels.

Create a registered icon file in src/icons

// src/icons/index.js
import './chevron-right.js';
// ...... 其他需要的图标文件

import Icon from '../components/Icon.vue';
Icon.register({
 'chevron-right': {
  'width': 1280,
  'height': 1792,
  'paths': [{
   'd': 'M1107 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'
  }]
 }
});

The project entrance main.js references the font library

vue-awesome library and icons/index.js File

import Icon from './components/Icon';

import './icons/index.js';

Vue.component('icon', Icon);

tag directly in the code

End

1. import Icon.vue component

2. new you-icon.js, which registers the icon through Icon.register

3. [Optional] Create a new icon file export file, this is in use It is more convenient when there are many icons

4. Quote icon

5. Set the style for the icon (the size can be set by transform: scale())

How to implement watch monitoring objects and corresponding value changes in vue

When using $emit in vue ,How to realize that the parent component cannot listen to the events of the child component?

How to use the global prompt box component in vue?

The above is the detailed content of About the use of vue-fontawesome in vue.js. For more information, please follow other related articles on the PHP Chinese website!