Use vue-fontawesome In the vue. js series,

Use vue-fontawesome In the vue. js series,

Preference

At present, the main work is to use the vue. js framework for development. I am not so familiar with the vue, but still in a half-bucket status. So I have to step up and get familiar with it. scaffolding is used in the past two days.vue-cli Creating a projectfont-awesomePerseverance. Through github, I learned that a great guy had made vue-awesome, so I started to make a fuss ......

Don't talk nonsense. Start it!

Preparations

This is the author's github address: Airplane

To demonstrate the complete procedure, create a project with scaffolding

Creating...

Just a few remarks

The advantage of using this method is that you can customize any icon by yourself, that is, output in svg format, and then use Icon.registerRegister an icon as follows:

If there are many icons, there may be a large number of svg labels scattered in the DOM. This is not a disadvantage.

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: the name of the icon.

<icon name="chevron-right"></icon> To use the style, follow the normal definition.

Paths contains the path information of the icon when drawing svg.

The installation is OK. Go to the question ......

Preparations:

• Install vue-awesome

$ npm install vue-awesome --save

This simple installation is complete.

Result Preview

The icon is actually an svg tag.

Icon storage directory

For ease of development, create the src/icons directory to store the icon js file in a centralized manner.

$ cd src/$ mkdir icons && cmod

Here, cmod is the 777 permission. Because it is a virtual machine, permission issues often occur. Therefore, simply give the 777 permission (only for local development)

Icon component

Download the Icon. vue File

Download the Icon. vue file here. We recommend that you git the entire project.

This component is used to create<icon name="your icon name"></icon>Custom tag.

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

Create a registration icon file in src/icons

This directory contains registration js files for all icons.

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

// Src/icons/index. jsimport './chevron-right.js'; // other required Icon files

Right-click the 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'  }] }});

Project entry main. js Reference Library

The main entry file of the Project is introduced in main. js.vue-awesome Library andicons/index.js File

Introduce icon Components

import Icon from './components/Icon';

Introduce the icon Content File

import './icons/index.js';

Register the Icon as a vue component.

Vue.component('icon', Icon);

After registration, we can directly use <icon></icon>Tag

End

The procedure is simple. After the above steps, we can use the icon library normally.

The summary steps are as follows:

1. Import Icon. vue component
2. New you-icon.js, which registers the Icon through Icon. register
3. [Optional] Create an icon file exit file, which is more convenient when using icons
4. <Icon name = "you icon name"> </icon> reference icon
5. Set a style for the icon (the size can be set through transform: scale)

PS: directly set the font, which cannot be changed;

Summary

The above is a small series of vue. the vue-fontawesome In the js series will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!