Vue3使⽤icon的两种⽅式实例
svg图片怎么使用⽬录
1. 使⽤svg
2. 使⽤fontAwesome
3  来源
4 总结
技术栈和版本 Vite2 + Vue3 + fontAwesome5
Vue3 中使⽤Icon的⽅式，fontAwesome 简单好⽤，但有时候缺少想要的icon。采⽤svg的⽅式，想要什么，直接下载，然后使⽤，种类更加的全，基本上没有不符合需求的icon，但是没有fontAwesome 相对的容易轻松，每次都要下载对应的图⽚。
1. 使⽤svg
a 下载需要使⽤的SVG图⽚，保存⾄ src/icons⽂件夹
b 安装依赖 fs 和svg的loader
命令：npm install svg-sprite-loader
命令：npm install --save fs
c 创建模板⽂件 index.vue
模板⽂件代码
<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 全局注册 main.js
import { svgIcon } from './components'
ponent('svg-icon',svgIcon)
e 创建导⼊处理函数在plugins中创建 svgBulider.js 代码
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 (!st($2)) {
content += `viewBox="0 0 ${width} ${height}"`
}
return `<symbol id="${idPerfix}-${place(            '.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) {
place(
'<body>',
<body>
<svg xmlns="/2000/svg" xmlns:xlink="/1999/xlink" >              ${res.join('')}
</svg>
`
)
}
}
}
f 修改配置⽂件，将svgBulider导⼊到配置⽂件
修改fig.js
import { svgBuilder } from './src/plugins/svgBuilder'; '
export default defineConfig({
plugins: [
vue(),
/
/调⽤对应的函数进⾏ svg 处理
svgBuilder('./src/icons/')//对应的⽂件夹，否则⽆法到
]
})
g 使⽤SVG
核⼼部分
<svg-icon name="questionmark" />//name 取你的svg图⽚
2. 使⽤fontAwesome
a npm 安装依赖
$ 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 全局注册
//按需导⼊
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 { fas } from'@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
library.add(fas,fab)
ponent('font-awesome-icon', FontAwesomeIcon)
c 使⽤
//按需导⼊的使⽤
<font-awesome-icon  icon="address-book" class="fa-spin fa-lg"/>
//全局导⼊的使⽤
<font-awesome-icon  :icon="['fas','address-book']" />
3  来源
4 总结
确定对应的技术栈和版本，按照步骤，就没什么问题。
到此这篇关于Vue3使⽤icon的两种⽅式的⽂章就介绍到这了，更多相关Vue3使⽤icon内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。