preface

Today, I am working on the company’s Vue project, which involves the reference of font icon and the modification of Element-UI font icon. In my previous company, I just changed bugs. Although I have learned a lot of things, I rarely practiced them by myself in the project. So some of the simple things have been forgotten, so write this article and sit down

Let’s start with the icon reference

In fact, there are three main ways to introduce ICONS: Unicode, Font class and Symbol. I have never known why the Font icon file is like this before. After a careful look today, I find that this is actually a file that provides three different introduction methods

The iconfont. CSS file is provided for the introduction of Unicode and FontClass. The iconfont. If you look at the demo, if you look at the Symbol, you can introduce color ICONS

If you want to use them in your Vue project, just import them in main.js

/ / use unicode and fontclass import ". / assets/iconfont iconfont. CSS "/ / use the Symbol way import". / assets/iconfont iconfont. Js. ""Copy the code

use

<template> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" ></el-tree> <! -- unicode --> <span class="iconfont">&#xe6cc; </span> <! Word-wrap: break-word! Important; ">< span class=" max-width: 100%; < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; "style =" box-sizing: border-box! Important;" style =" box-sizing: border-box! Important;" </template> <script> export default {name: "Element", data() {return {data: [{label: "level 1", children: [{label:" level 1"] "Secondary 1-1", the children: [{label: "three 1-1-1",},],},],}, {label: "level 2", the children: [{label: "secondary 2-1", the children: [{label: "three 2-1-1",},],}, {label: "secondary 2-2", the children: [{label: "three 2-2-1",},],},],}, {label: "Level 3", the children: [{label: "secondary 3-1", the children: [{label: "three 3-1-1",},],}, {label: "secondary 3-2", the children: [{label: "triple the 3-2-1",},],},],},], defaultProps: {children: "children", the label: "label",},}; }, methods: { handleNodeClick(data) { console.log(data); ,}}}; </script> <style scoped></style>Copy the code

Then there’s the elemental-UI icon replacement

<template> <el-tree class="tree" :data="data" :props="defaultProps" @node-click="handleNodeClick" ></el-tree> <! -- unicode --> <span class="iconfont">&#xe6cc; </span> <! Word-wrap: break-word! Important; ">< span class=" max-width: 100%; < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; "style =" box-sizing: border-box! Important;" style =" box-sizing: border-box! Important;" </template> <script> export default {name: "Element", data() {return {data: [{label: "level 1", children: [{label:" level 1"] "Secondary 1-1", the children: [{label: "three 1-1-1",},],},],}, {label: "level 2", the children: [{label: "secondary 2-1", the children: [{label: "three 2-1-1",},],}, {label: "secondary 2-2", the children: [{label: "three 2-2-1",},],},],}, {label: "Level 3", the children: [{label: "secondary 3-1", the children: [{label: "three 3-1-1",},],}, {label: "secondary 3-2", the children: [{label: "triple the 3-2-1",},],},],},], defaultProps: {children: "children", the label: "label",},}; }, methods: { handleNodeClick(data) { console.log(data); ,}}}; </script> <style style lang=" SCSS "> /* [class*="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] {font-family: "icon -"; important; }.tree /deep/.el-tree-node__expand-icon. Expanded {// Delete animation -webkit-transform: rotate(0deg); transform: rotate(0deg); }.tree /deep/.el-tree-node__expand-icon. El-icon-caret-right :before {// Fold content: "\e6cb"; font-size: 18px; }.tree /deep/.el-tree-node__scale-icon.expanded. El-icon-caret-right :before {// Expand content: "\e6cc"; font-size: 18px; } </style>Copy the code

At the end

Study hard and watch well