1. Go to https://icomoon.io/, top right, choose "IconMoon App" to enter.
2. Click on import Icons, select the file you want to generate svg icon.
3. After selecting the icon, click the bottom right corner Generate Font, can be set to enter the name of the icon.
5. In the preferences selected iconmoon Stylus. Font Name can be used for file name after downloading. Class Prefix is after each icon has a unified prefix.
6. Click the download, unzip the following files.
7. The common fonts folder to the src directory. Folder and add the stylus in the common catalog. Copy the files and style.styl variables.styl files in it. (Style.styl can be changed icon.styl) my project directory as follows:
? 8. Change variables.styl in icomoon-font-path = "... / fonts" where path is the path fonts.
9. introduced import "./common/stylus/icon.styl" in the main.js;
10. Once the icon references in the project.
<template>
<div id="app">
<div>
<span class="icon-bili">
<span class="path1"></span>
<span class="path2"></span>
</span>
<span>icon-bili</span>
</div>
</div>
</template>
<style lang="stylus">
</style>
- The results are as follows:
https://github.com/Gesj-yean/vue-demo-collection documented use more outstanding plug-ins. Students have time to look at my top blog can thank you very much.