Elegant practical record of introducing iconfont icon library into vue

Preface
Generate SVG

Introduction to SVG sprites
Get the project icon

Project Setup

Icon Reference
Component reference

Multiple theme support

Configuring multiple theme styles
Icon Transformation
Page verification

Final words

Preface

The original intention of writing this article is to promote the use of svg sprites to manage project icons to team members. Since many projects in actual work still use font classes, this unconsciously brings a pain point.

After the first phase of the project is completed, it will enter the second phase after a while. New development requirements will inevitably add new icons, and the font class requires the font file of the full-volume packaged icon.

Even if the new requirement only adds one icon, the front-end developer has to merge the old icon with the new icon and repackage it to generate a font file. This result is unacceptable.
SVG sprites can perfectly solve this problem. The overall idea is to generate an SVG file for each icon in the project, and then the number of SVG files is equivalent to the number of icons.

If you want to add a new icon in the future, you only need to add a new svg file. The existing icons and svg files do not need to be involved.
This article will use vue3 as the basic framework and iconfont as the icon library to practice the entire process of icon introduction, use and management step by step. In addition, in the second half of the article, the corresponding processing of svg icons in multi-theme color changing mode will also be introduced.

Generate SVG

Introduction to SVG sprites

SVG sprites technology has been around for a long time. For more details, please click here to view Zhang Xinxu's article "Future Will Be Hot: Introduction to SVG Sprites Technology" written in 2014.

We will briefly introduce it here and then move on to the practical stage. SVG sprites are mainly based on two tag elements: <symbol> and <use>.

<symbol> groups elements. It will not be displayed on the interface, which is equivalent to defining a template. The <use> element is used to reference and render icons.

For example, there is a svg icon below (the code is as follows), which is in the shape of a heart.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
        <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
</svg>

Now use the symbol tag to wrap the above path content. The code is as follows:

<svg>
    <symbol viewBox="0 0 24 24" id="heart">
        <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
    </symbol>
</svg>

Next, put the code wrapped with symbol into the page (the code is as follows), and then add a display: none to hide it. This is equivalent to registering an icon with the id name heart on the page.

At this point, other parts of the page can reference this icon. The reference method is to put a use tag in the svg tag, fill in the xlink:href of the use tag with the icon id to be referenced, and the interface will render a heart shape.

<body>
    <svg style="display: none;">
        <symbol viewBox="0 0 24 24" id="heart">
            <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
        </symbol>
    </svg>

    <svg>
        <use xlink:href="#heart" rel="external nofollow" /> <!-- Use icon -->
    </svg>
</body>

Get the project icon

After receiving the design drawings, front-end students usually browse through all the icons needed for the entire project.

Iconfont is a vector icon library created by Alibaba's experience team, which contains a large number of icons for front-end engineers to choose and use.

Open the iconfont official website in your browser, select the icon you want to use in your project, move the mouse to the icon and click Add to Library.

After collecting all the icons, click the shopping cart in the navigation bar on the right side of the head, a pop-up box will appear, click Add to Project. After all the icons are confirmed to be added to the project, the page will automatically jump to the page under Resource Management in the navigation bar - My Project (as shown below).

Our goal is to generate the svg file corresponding to the icon, so we need to do some settings here. Open the project settings option in the above picture, and the pop-up window will be as shown below.

In the pop-up font format column, only keep the SVG option checked and uncheck the others. After setting, click the Save button.

The page will refresh at this time, and then click the Download to Local button on the page to download and decompress the svg files of all icons. The decompressed file structure is as shown below.

Observing the file structure in the figure above, we find that all the SVG icon codes are written in the iconfont.svg file, which is not what we expected. We hope that one icon corresponds to one SVG file, instead of putting all of them into one file as it is now.

Although iconfont currently does not provide a file separation mechanism, we can use other platforms to help us separate the merged svg files into individual files.

Iconmoon website has this function, it is also an icon library website similar to iconfont.

Open the iconmoon official website in the browser, select IcoMoon App on the right side of the top navigation bar to enter the icon selection page, click Imports Icons on the left side of the page header navigation bar, and import the iconfont.svg file downloaded from iconfont. The result is as shown below.

In the iconfont column, you can see that the imported icon is displayed on the page. Next, click the imported icon with the mouse to mark it as selected, and then click the Generate SVG & More button in the lower left corner of the page (as shown below).

After clicking the button, the page will jump. At this time, still click the Download button in the lower left corner (as shown below) to download the icon.

After downloading, unzip the directory. An SVG folder will appear in the unzipped directory. When you open the folder, you will find that all icons have been separated into individual files (as shown below).

Project Setup

The svg file is successfully obtained. Now create a new folder fonts and a subfolder fonts/svg in the vue3 project directory structure src -> assets folder, and throw all the svg single files generated above into fonts/svg.
The file settings are complete. Now let's start configuring the project so that Vue3 can manage and use icons smoothly.

The first step is to open a command line in the project root directory and run npm i svg-sprite-loader -D. We need to install the dependency svg-sprite-loader because it can automatically insert the code of the svg file into symbol tags.
The second step is to create a new file vue.config.js in the project root directory. Students familiar with vue should know that vue.config.js is used to configure the build environment.

For detailed configuration parameters of vue.config.js, please click to query the vue-cli official website. Here we only need to know how to configure svg-sprite-loader.

As we all know, the construction environment of vue-cli is based on webpack. By adding various configuration parameters in the vue.config.js file, vue-cli will eventually merge these parameters into the webpack configuration.

In this way, we can achieve the purpose of configuring the development environment through vue.config.js without directly operating the webpack configuration file.

The dependency svg-sprite-loader has been installed. Now we need to load this loader into the webpack configuration. This can be achieved by filling in the following code in vue.config.js.

const resolve = require("path").resolve;

module.exports = {
   chainWebpack(config){
        //Introduce icon config.module.rule("svg").exclude.add(resolve("./src/assets/fonts/svg"));
        config.module.rule("icon").test(/\.svg$/)
        .include.add(resolve("./src/assets/fonts/svg")).end()
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .options({
            symbolId:'icon-[name]'
        });
   }
}

Students who have systematically studied webpack configuration can easily see the meaning of the above code. The above code first excludes the svg rule set in rule from the "./src/assets/fonts/svg" directory.

Then add a new rule icon to include the "./src/assets/fonts/svg" directory, which is the folder where we store all svg files.

The code then uses .use and .loader to configure svg-sprite-loader into the project environment and sets the symbolId to icon-[name].

The symbolId here is related to the id name generated by the <symbol> tag. If the symbolId is set to icon-[name], then the icon will be referenced by the <use> tag on the page using icon- plus the file name.

The third step is to create a new file index.js under assets/fonts (the file structure is as shown below) and fill in the following two lines of code.

These two lines of code mainly use the require.context function in webpack, which can help us automatically introduce file modules.

The first parameter of require.context represents the target file directory, the second parameter is whether to apply to subfolders, and the third parameter matches the file format.

const load = require.context("./svg",false,/\.svg$/);
load.keys().map(load);

After require.context is executed, it returns the result load. The return value load itself is a function that introduces the module. In addition, it also contains a keys attribute. The result returned by executing load.keys() is as follows.

 ["./arrow.svg", "./arrowon.svg", "./downarrow.svg", "./jiantou.svg", "./trash.svg", "./yiwenicon.svg"]

We can see from here that load.keys() will return the relative paths of all icons in the fonts/svg folder, and then use the loda function to load the files in these paths, so that all files ending with .svg in the fonts/svg folder can be dynamically imported.

If you need to add a new icon in the future, first download a single svg file from the iconfont website, and then drop it into the fonts/svg folder to automatically import it.

The last step is to call the newly created index.js in the third step in the project's entry file main.js to automatically import all svg files (the code is as follows).

import { createApp } from 'vue';
import App from './App.vue'; // Root component import "@/assets/fonts/index"; // Automatic import import router from '@/router/index'; // Routing createApp(App).use(router).mount('#app');

The above four steps basically complete the configuration of the project, and the entire operation process can be simply sorted out.

After the entry file main.js is started, execute assets/fonts/index.js to start the automatic import of all svg files.

Once svg-sprite-loader detects that a file ending with .svg is introduced into the project, it will encapsulate all the code contents of these svg into <symbol> tags (as shown below), and then insert them into the page document together.

This will be equivalent to svg-sprite-loader helping us register all svg icons on the page, and the rest of our work is to reference the icons on the page.

Icon Reference

We fill in the following code on the Home page (the effect is as follows). Assign the string formed by concatenating the #icon- prefix and the corresponding file name under fonts/svg to the xlink:href attribute, and the icon corresponding to the file will be rendered.

<template>
  <div class="home">
    <p class="title">Hello world</p>
    <svg>
        <use xlink:href="#icon-trash" rel="external nofollow" /> <!-- Use icon -->
    </svg>
  </div>
</template>

Component reference

The way of using svg and use tags to reference icons on the page is not very elegant. We can transform it into a component.

Create a new file Icon/index.vue in the global component folder components. This component accepts two parameters name and color (the code is as follows).

The parameter name corresponds to the icon name to be rendered, and color is the color to be rendered. It should be noted here that the color of svg can only be modified through the fill attribute, and it will not work when the color attribute is assigned.

<template>
    <svg :style="{fill:color?color:''}">
        <use :xlink:href="'#icon-'+name" rel="external nofollow" rel="external nofollow" />
    </svg>
</template>

<script>
export default {
 props:{
     name:String, //icon name color:{ //icon color type:String,
         deafult:null
     }
 }
}
</script>

Now reference the Icon component on the Home page (the code is as follows).

The rendered icon is named trash and its color is blue (see the image below).

<template>
  <div class="home">
    <p class="title">Hello world</p>
    <Icon name="trash" color="blue"/><!-- Use icon-->
  </div>
</template>
<script>
import Icon from "@/components/Icon/index";
export default {
    components:{
        Icon
    }
}
</script>

Multiple theme support

From the above explanation, we can know that when we give the <svg> tag the style attribute fill, the final icon color will also change, which makes it possible for us to complete the development needs of multiple themes.

Next, we will build a scene where we can switch themes online by clicking a button, so that the SVG icon can also change with the change of themes.

Configuring multiple theme styles

First, create a new file scss/variable.scss in the project folder src/assets, and the code content is as follows.

The code defines three themes: default theme, theme 1, and theme 2. Each theme defines its own icon color and background color.

The lower part of the code defines three mixins, which are used to set the fill, color, and background-color properties. In each mixin, the colors set by different themes use the color settings under their own theme.

//Default theme $icon-color:red;
$background-color:#fff;

// Theme 1
$icon-color1:gray;
$background-color1:#eee;

// Theme 2
$icon-color2:blue;
$background-color2:#999;

// Used to fill svg with color @mixin fill {
    fill:$icon-color; //Default color uses the default theme [data-theme = "theme1"] & { //Color when switching to theme 1 fill:$icon-color1;
    }
    [data-theme = "theme2"] & { //Color fill when switching to theme 2: $icon-color2;
    }
}
//Set the color attribute @mixin color {
    color:$icon-color; //Default color uses the default theme [data-theme = "theme1"] & { //Color when switching to theme 1 color:$icon-color1;
    }
    [data-theme = "theme2"] & { //Color when switching to theme 2 color:$icon-color2;
    }
}

//Set the background color @mixin backgroudColor {
    background-color:$background-color; //Default color uses the default theme [data-theme = "theme1"] & { //Color when switching to theme 1 background-color:$background-color1;
    }
    [data-theme = "theme2"] & { //Color when switching to theme 2 background-color: $background-color2;
    }
}

variable.scss is a global multi-theme configuration file, which can not only configure the colors that should be rendered in each theme, but also configure the font size, commonly used width and height, etc.

After the configuration file is written, it is now necessary to reference this file to the project. Open the vue.config.js project configuration file in the root directory in the editor and add the following code.

const resolve = require("path").resolve;

module.exports = {
   chainWebpack(config){
        //Introduce icon config.module.rule("svg").exclude.add(resolve("./src/assets/fonts/svg"));
        config.module.rule("icon").test(/\.svg$/)
        .include.add(resolve("./src/assets/fonts/svg")).end()
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .options({
            symbolId:'icon-[name]'
        });
   },
   css: {
    loaderOptions: {
        scss: {
            prependData: `@import "@/assets/scss/variable.scss";`
        },
    }
   } 
}

Add a new configuration property css in module.exports, and then fill in the path of the multi-theme configuration file we wrote above into the corresponding value of prependData.

In order to avoid file import failure due to different sass versions, unify the versions of sass and sass-loader.

"sass": "1.26.5",
"sass-loader": "8.0.2",

After vue.config.js is configured, restart the application. variable.scss has been globally injected into the application. Next, we do not need to use @import to import the theme configuration file in the page component. The variables and mixins defined in variable.scss can be used directly.

Icon Transformation

To make the icon respond to the theme change, the global Icon component is modified as follows. If the color property has a value, the icon is rendered according to the passed color. If no color is passed, the factor that determines the icon color becomes the class name icon.

<template>
    <svg class="icon" :style="{fill:color?color:''}">
        <use :xlink:href="'#icon-'+name" rel="external nofollow" rel="external nofollow" />
    </svg>
</template>

<script>
export default {
 props:{
     name:String,
     color:{
         type:String,
         deafult:null
     }
 }
}
</script>

<style lang="scss" scoped>
 .icon{
   @include fill;
 }
</style>

The mixin corresponding to fill is called in the class name icon, and the definition of fill in the file variable.scss is as follows.

It finally returns a property fill:color. By default, the fill color value is $icon-color.

When the value of the attribute data-theme on the html tag of the page document becomes theme1, the color rendered by fill becomes the color defined by theme 1. Similarly, when switching to theme2, the color rendered by fill becomes the color defined by theme 2.

// Used to fill svg with color @mixin fill {
    fill:$icon-color; //Default color uses the default theme [data-theme = "theme1"] & { //Color when switching to theme 1 fill:$icon-color1;
    }
    [data-theme = "theme2"] & { //Color fill when switching to theme 2: $icon-color2;
    }
}

We can understand the purpose of the above configuration by observing the DOM structure finally generated by the page. @mixin will eventually generate a style sheet for each theme (as shown below). In this way, as long as the data-theme of the <html> tag is equal to a certain theme, the style sheet of the corresponding theme will take effect.

Page verification

Fill in the following code in the Home page component. Three buttons, Default Theme, Theme 1 and Theme 2, are added to the original page.

Clicking the button triggers the updateTheme function, which modifies the attribute value of data-theme on the <html> tag, thereby realizing the theme switching function (the effect diagram is as follows).

<template>
  <div class="home">
    <p class="title">Hello world</p>
    <Icon name="trash"/><!-- Use icon-->
    <button @click="updateTheme()">Default theme</button>
    <button @click="updateTheme('theme1')">Theme 1</button>
    <button @click="updateTheme('theme2')">Theme 2</button>
  </div>
</template>
<script>
import Icon from "@/components/Icon/index";
export default {
    components:{
        Icon
    },
    methods: {
        updateTheme(name){
            if(name == null){ // Use the default themedocument.documentElement.removeAttribute("data-theme");
            }else{
                document.documentElement.setAttribute("data-theme",name);
            }
        } 
    },
}
</script>
<style scoped lang="scss">
.home{
    height: 100%;
    @include backgroundColor;
}
.title{
  @include color;
}
</style>

Final result:

Final words

The multi-theme implementation described above is very simple to operate, but it is not suitable for large and complex projects.

Imagine that if a large project contains more than a dozen themes, and the CSS code under each theme is very large, it is inappropriate to inject all the style codes under all the themes into the application at once.

The best practice should be that when the user clicks to switch to a certain type of theme, the style of that type of theme is loaded on demand, and then injected into the application for rendering, which can greatly improve the overall performance. For best practices, please refer to the articles about multi-theme switching in the community.

This is the end of this article about Vue introducing iconfont icon library. For more relevant Vue introducing iconfont content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

source code

You may also be interested in:

Solve the problem of iconfont file path after webpack packaging of vue-cli project
About using Alibaba's iconfont vector icon in Vue
How to use VUE to call Ali Iconfont library online
vue project, code submitted to code cloud, iconfont usage instructions
How to use iconfont in vue and mini program projects
Vue file uses iconfont parsing

<<: Summary of the Differences between SQL and NoSQL

>>: Example method to find keywords and their preceding and following information in Linux logs