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

For the convenience of development, create a new src/icons directory to centrally store icon js files

$ cd src/
$ mkdir icons && cmod

The cmod here is 777 permissions. Since a virtual machine is used, permissions often appear problem, so simply report it directly to 777 (local development only)

icon component

Download the Icon.vue file

Go here to download Icon.vue file, it is recommended to git the entire project.

The purpose of this component is to create

Custom labels.

Then put Icon.vue in the components directory (you can decide where to put it)

Create a registered icon file in src/icons

This The registered js files of all icons are placed in the directory

Create the export file index.js, which will introduce all the icon js files

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

Take the right-click header icon as an example: (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

The project main entrance file main.js introduces

vue-awesome library and icons/index.js File

Introduce the icon component

import Icon from './components/Icon';

Introduce the icon content file

import './icons/index.js';

Then register the Icon as a vue component

Vue.component('icon', Icon);

After the registration is completed, we can use the

tag directly in the code

End

Usage steps It’s still very simple. After the above steps, we can use the icon library normally

To summarize, the steps are actually the following steps

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())

PS: Set the font directly, but the size cannot be changed;

The above is what I compiled for everyone Yes, I hope it will be helpful to everyone in the future.

Related articles:

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!