Two examples of using icons in Vue3
|
Technology stack and version Vite2 + Vue3 + fontAwesome5 The way to use Icon in Vue3, fontAwesome is simple and easy to use, but sometimes the desired icon is missing. Using the svg method, you can directly download and use whatever you want. The types are more complete, and there is basically no icon that does not meet your needs. However, it is not as easy as fontAwesome, and you have to download the corresponding picture every time. 1. Use SVGa Download the SVG image you want to use and save it to the src/icons folder
b Install the loader that depends on fs and svg Command: Command: c Create a template file index.vue
Template file code
<template>
<svg :class="svgClass" v-bind = "$attrs">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script setup>
import { defineProps, computed } from "vue";
const props = defineProps({
name: {
type: String,
required: true
},
color:
type: String ,
default: '',
}
})
const iconName = computed(()=>`#icon-${props.name}`);
const svgClass = computed(()=> {
// console.log(props.name,'props.name');
if (props.name) {
return `svg-icon icon-${props.name}`
}
return 'svg-icon'
});
</script>
<style scoped lang ="scss">
.svg-icon{
width: 3em;
height: 3em;
fill: currentColor;
border: solid 2px red;
vertical-align: middle;
}
</style>>
d Global registration main.js
import { svgIcon } from './components'
.component('svg-icon',svgIcon)
e Create an import processing function and create svgBulider.js in plugins
Code
import { readFileSync, readdirSync } from 'fs'
let idPerfix = ''
const svgTitle = /<svg([^>+].*?)>/
const clearHeightWidth = /(width|height)="([^>+].*?)"/g
const hasViewBox = /(viewBox="[^>+].*?")/g
const clearReturn = /(\r)|(\n)/g
function findSvgFile(dir) {
const svgRes = []
const dirents = readdirSync(dir, {
withFileTypes: true
})
for (const dirent of dirents) {
if (dirent.isDirectory()) {
svgRes.push(...findSvgFile(dir + dirent.name + '/'))
} else {
const svg = readFileSync(dir + dirent.name)
.toString()
.replace(clearReturn, '')
.replace(svgTitle, ($1, $2) => {
let width = 0
let height = 0
let content = $2.replace(
clearHeightWidth,
(s1, s2, s3) => {
if (s2 === 'width') {
width = s3
} else if (s2 === 'height') {
height = s3
}
return ''
}
)
if (!hasViewBox.test($2)) {
content += `viewBox="0 0 ${width} ${height}"`
}
return `<symbol id="${idPerfix}-${dirent.name.replace(
'.svg',
''
)}" ${content}>`
})
.replace('</svg>', '</symbol>')
svgRes.push(svg)
}
}
return svgRes
}
export const svgBuilder = (path, perfix = 'icon') => {
if (path === '') return
idPerfix = perfix
const res = findSvgFile(path)
return {
name: 'svg-transform',
transformIndexHtml(html) {
return html.replace(
'<body>',
`
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">
${res.join('')}
</svg>
`
)
}
}
}
f Modify the configuration file and import svgBulider into the configuration file Modify vite.config.js
import { svgBuilder } from './src/plugins/svgBuilder'; '
export default defineConfig({
plugins: [
vue(),
//Call the corresponding function to process svg svgBuilder('./src/icons/') //The corresponding folder, otherwise it cannot be found]
})
g Using SVG
Core part <svg-icon name="questionmark" />//name Take your svg image 2. Use fontAwesomea npm install dependencies $ npm i --save @fortawesome/fontawesome $ npm i --save @fortawesome/vue-fontawesome $ npm i --save @fortawesome/fontawesome-free-solid $ npm i --save @fortawesome/fontawesome-free-regular $ npm i --save @fortawesome/fontawesome-free-brands b mian.js global registration
//Import on demand import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faAd } from '@fortawesome/free-solid-svg-icons'
import { faAddressBook } from '@fortawesome/free-solid-svg-icons'
library.add(faAddressBook)
// Import all import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
library.add(fas,fab)
.component('font-awesome-icon', FontAwesomeIcon)
c Use
//Use of on-demand import<font-awesome-icon icon="address-book" class="fa-spin fa-lg"/>
//Use of global import <font-awesome-icon :icon="['fas','address-book']" />
3 SourcesSource fontAwesome https://www.jb51.net/article/228944.htm Source svg https://www.jb51.net/article/228948.htm 4 ConclusionDetermine the corresponding technology stack and version, follow the steps, and there will be no problem. This concludes this article about two ways to use icons in Vue3. For more relevant content about using icons in Vue3, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
>>: Implementation of Grid common layout
Recommend
Analysis and solution of MySQL connection throwing Authentication Failed error
[Problem description] On the application side, th...
Solution to IDEA not being able to connect to MySQL port number occupation
I can log in to MYSQL normally under the command ...
wget downloads the entire website (whole subdirectory) or a specific directory
Use wget command to download the entire subdirect...
Example code for implementing 3D Rubik's Cube with CSS
Let's make a simple 3D Rubik's Cube today...
WEB standard web page structure
Whether it is the background image or the text siz...
Perform data statistics on different values of the same field in SQL
Application scenario: It is necessary to count th...
Nginx configuration location matching rules example explanation
The scope of nginx configuration instructions can...
MySQL 8.0.13 manual installation tutorial
This article shares the manual installation tutor...
A brief description of the relationship between k8s and Docker
Recently, the project uses kubernetes (hereinafte...
A brief discussion on how to write beautiful conditional expressions in JS
Table of contents Multiple conditional statements...
How to quickly install nginx under Windows and configure it to start automatically
Table of contents 1. Nginx installation and start...
Alibaba Cloud Server Linux System Builds Tomcat to Deploy Web Project
I divide the whole process into four steps: Downl...
After Webpack-cli is successfully installed, check the webpack -v error case for details
Table of contents question 1. Install webpack web...
React entry-level detailed notes
Table of contents 1. Basic understanding of React...
Zabbix WEB monitoring implementation process diagram
Take zabbix's own WEB interface as an example...