Shulou(Shulou.com)06/01 Report--

This article "based on Vue can only achieve custom components to introduce icons" most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can read this article can have a harvest, let's take a look at this "based on Vue can only achieve custom components to introduce icons" article it.

Build an environment

Here we create a new project through @ vue/cli 4.5.13, and we need to install dependent svg-sprite-loader to deal with the corresponding svg icon, which is convenient for us to use.

Installation: npm install-- save-dev svg-sprite-loader

Configure vue.config.js

After installing svg-sprite-loader, create a new vue.config.js to configure dependencies:

/ / vue.config.jsconst {resolve} = require ("path") module.exports = {chainWebpack (config) {config .module .rule ("svg") .addi.add (resolve ("src/icons")) .end () config .rule ("icons") .test (/ .svg $/) .include .add (resolve ("src/icons") ) .end () .use ("svg-sprite-loader") .loader ("svg-sprite-loader") .options ({symbolId: "icon- [name]"})}}

Here are two configurations done through chainWebpack:

The first is to let the other dependencies that deal with svg do not deal with our custom icon file under src/icons.

The custom icon file is handled through svg-sprite-loader, and the settings in options indicate that the symbolId of the generated svg is the splicing of icon and file name.

Create a new icon component

Create a new SvgIcon.vue file in the components directory:

Import {PropType, toRefs} from "vue" export default {props: {size: {type: Number as PropType, default: 14}, fillColor: {type: String as PropType, default: "# 000"}, iconName: {type: String as PropType, required: true}}, setup (props: any) {const {size, fillColor IconName: _ iconName} = toRefs (props) const iconName = `# ${_ iconName.value} `return {size, fillColor, iconName}

Then, create a new icons directory and a new index file to hang on the component and introduce the svg icon:

/ / index.tsimport SvgIcon from "@ / components/SvgIcon.vue" import {App} from "vue" export default (app: App) = > {app.component ("svg-icon", SvgIcon)} const ctx = require.context (". / svg", false / .svg $/) const requestAll = (ctx: _ _ WebpackModuleApi.RequireContext) = > ctx.keys (). ForEach (ctx) requestAll (ctx) / main.tsimport {createApp} from "vue" import App from. / App.vue "import installSvgIcon from" @ / icons/index "const app = createApp (App) installSvgIcon (app) app.mount (" # app ")

This document does two things:

Mount the global component svg-icon by exporting a method

Automatic introduction of icon files in the svg directory through require.context.

Working with components

First, we need to store the svg icon file in the icons/svg directory (find what we need on iconfont)

Then you can use it elsewhere:

It is introduced directly through the component svg-icon, and then icon-name is passed. The value of icon-name consists of the name of the icon spliced svg file.

The above is about the content of this article, "only custom components can be introduced based on Vue". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.