vue introduced icomoon color icons, stylus file

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.
Here Insert Picture Description
3. After selecting the icon, click the bottom right corner Generate Font, can be set to enter the name of the icon.
Here Insert Picture Description
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. Here Insert Picture Description
6. Click the download, unzip the following files.
Here Insert Picture Description
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:
Here Insert Picture Description
? 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>
  1. The results are as follows:
    Here Insert Picture Description

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.

Published 27 original articles · won praise 4 · Views 2833

Guess you like

Origin blog.csdn.net/qq_39083496/article/details/88586862