preface

Recently, I learned a lot of knowledge about icon usage in the practice project. This article is a summary.

Why use iconfont

In the beginning, all ICONS of a project were represented by pictures. Later, I found that this took too much resources, so I put all ICONS together to form Sprite images (Sprite images), and then used CSS background-position to display different icon ICONS. Of course, there are a lot of disadvantages, such as the need to modify the wizard map every time, especially troublesome.

This is when font ICONS appear, this thing can use text to achieve ICONS, not only easy to use and resources.

Use iconfont gracefully

This section refers to the article that shows you how to use ICONS gracefully.

Iconfont has three uses: Unicode, font-class and SVG. The first two are relatively easy, and SVG is generally good if not for compatibility, so I won’t document them. This is how to use SVG efficiently in your projects

Create the Icon component

First, we create the Icon component and register it globally

// Create a component
<template>
  <svg class="svg-icon"
       aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'icon-svg'.props: {
    iconClass: {
      type: String.required: true}},computed: {
    iconName () {
      return `#icon-The ${this.iconClass}`}}}</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15 em;
  fill: currentColor;
  overflow: hidden;
}
</style>
Copy the code

import SvgIcon from '@/components/SvgIcon'

// Global registration
createApp(App).component('svg-icon',SvgIcon)
// Use it locally
<svg-icon icon-class='rili'></svg-icon>
Copy the code

Using SVG – Sprite

After selecting the icon from iconfont, the download looks like this

├── └.css ├─ Iconfont.js ├─ iconfont. Json ├─ ├.ttfCopy the code

Demo_index.html is a tutorial for using the three methods. If you want to use SVG, you must introduce iconfont. Js file in your project. If I want to add or remove SVG, I need to download a new JS file. I use svG-Sprite-loader to make my own SVG-Sprite

The configuration of vue.config.js is as follows

    // This is because vue-CLI by default uses url-loader to process SVG and places it in /img '
    // So we use exclude to exclude the SRC/ICONS folder
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
Copy the code

For now, we use SVG without having to introduce iconfont. Js in our project.

Automatically importing SVG

After the previous step, we can use the icon as follows

/ / into the icon
import '@/src/icons/**.svg; // use icon < SVG -icon icon-class='**'></svg-icon>
Copy the code

But so far it’s not good enough! If we use hundreds or thousands of ICONS in our project, we can’t write thousands of lines of import. So you need to use require.context to automatically import SVG files.

require.context

Require. context is a function of Webpack that takes three arguments

• Directory: indicates the directory to be retrieved
• UseSubdirectories: Whether to retrieve subdirectories
• RegExp: regular expression for matching

Its return value is also a function that has three properties (in JS functions are also objects).

• Resolve {Function} – Takes request, which is the relative path of the matched file under the test folder, and returns the relative path of the matched file relative to the entire project
• Keys {Function} – Returns an array of the names of successfully matched modules
• Id {String} – The id of the execution environment, which returns a String, used in module.hot.accept.

This function takes a name from keys and imports the corresponding module.

Req = const require.context(‘./***’, false, /.*/) to assign the function to files. In this case, req(req.keys()[0]) will automatically import the first matching file.

So we can use the following statement to automatically import SVG

const req = require.context('./svg'.false./\.svg$/)
const requireAll = requireContext= > requireContext.keys().map(requireContext)
requireAll(req)
Copy the code

Require. context another use: automatically import routes or store modules

const modulesFiles = require.context('./modules'.true./\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) = > {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/.'$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
Copy the code

The difference is that the import store module is not directly imported, but placed as an object in the vuex constructor. So here we use an object to store the module. Where value.default is to get the contents of the module (because calling a function just imports the module, but we need to know the contents of the module here), modulePaht.replace() is to change the path./app.js to the key app of the object.

The last

At this point, we can use ICONS in our projects in a way that has always been elegant. In the future, you just need to add the newly added SVG to the corresponding./ ICONS/SVG folder.

We can use icon anywhere in the project using < svG-icon icon-class=’***’>
.