Vue3使用icon的两种方式实例
目录
- 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'
.component('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 (!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 修改配置文件,将svgBulider导入到配置文件
修改vite.config.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)
.component('font-awesome-icon', FontAwesomeIcon)
c 使用
//按需导入的使用
<font-awesome-icon icon="address-book" class="fa-spin fa-lg"/>
//全局导入的使用
<font-awesome-icon :icon="['fas','address-book']" />
3 来源
来源 fontAwesome https://www.jb51.net/article/228944.htm
来源 svg https://www.jb51.net/article/228948.htm
4 总结
确定对应的技术栈和版本，按照步骤，就没什么问题。
到此这篇关于Vue3使用icon的两种方式的文章就介绍到这了,更多相关Vue3使用icon内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue.js通过组件处理Icon图标
Icon图标处理方案 记录一次对于想使用element-plus之外的图标,如何封装成一个组件,是本次记录的目标,希望在工作时能帮助自己处理图标问题. 分析,对于element-plus的图标可以通过el-icon来进行显示,而自定义图标需要自定义一个图标组件,用来显示自定义svg图标. 组件能力 显示外部svg图标(外链) 显示项目内的svg图标 图标组件封装思路 用于展示的图标组件 创建 components/SvgIcon/index.vue: <template> <div v
-
Vue项目中如何引入icon图标
1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角"IcoMoon App",找到自己需要的图标后选择然后点击右下角"Generate Font",接着可以在左上角第二个按钮"Preferences"进行自定义你要下载的图标信息,一般我都是进去改一下"Font Name",然后返回点击右下角"Do
-
vue使用自定义icon图标的方法
首先因为elementUI提供的icon太少了,所有自己找找有没有矢量图可以补充的,尝试多种方法,觉得下面方法简单易懂,分享给大家 效果图: 推荐使用阿里爸爸矢量图标管理,iconfont 使用方法 登录账号,找到需要的图标加入购物车 然后添加到项目 再然后下载代码到本地 下载代码文件然后解压出现这列表 打开HTML文件,引用方法教程 补充我人的坑,之前想着在style标签里@import "",结果一直报错,试了很多方法还是没效果,把问题想复杂了 第一步:在index.html引入f
-
vue 自定义icon图标的步骤
ant-design-vue自定义使用阿里iconfont图标\ 第一步:从iconfont获取项目js链接 第二步 在需要引用iconfont的页面处加入 在Deom中使用: <a> <Fonts type='icon-zutaishitu'/> </a> import { Icon } from 'ant-design-vue'; const Fonts = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.co
-
vue element项目引入icon图标的方法
为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库 阿里巴巴图标网站: http://www.iconfont.cn/ 下面具体介绍如何使用 1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建. 2.点击添加到项目后,选中第二个 3.点击更多操作里面的
-
Vue3使用icon的两种方式实例
目录 1. 使用svg 2. 使用fontAwesome 3 来源 4 总结 技术栈和版本 Vite2 + Vue3 + fontAwesome5 Vue3 中使用Icon的方式,fontAwesome 简单好用,但有时候缺少想要的icon.采用svg的方式,想要什么,直接下载,然后使用,种类更加的全,基本上没有不符合需求的icon,但是没有fontAwesome 相对的容易轻松,每次都要下载对应的图片. 1. 使用svg a 下载需要使用的SVG图片,保存至 src/icons文件夹 b 安
-
Spring加载properties文件的两种方式实例详解
在项目中如果有些参数经常需要修改,或者后期可能需要修改,那我们最好把这些参数放到properties文件中,源代码中读取properties里面的配置,这样后期只需要改动properties文件即可,不需要修改源代码,这样更加方便.在Spring中也可以这么做,而且Spring有两种加载properties文件的方式:基于xml方式和基于注解方式.下面分别讨论下这两种方式. 1. 通过xml方式加载properties文件 我们以Spring实例化dataSource为例,我们一般会在beans
-
java 实现websocket的两种方式实例详解
一.介绍 1.两种方式,一种使用tomcat的websocket实现,一种使用spring的websocket 2.tomcat的方式需要tomcat 7.x,JEE7的支持. 3.spring与websocket整合需要spring 4.x,并且使用了socketjs,对不支持websocket的浏览器可以模拟websocket使用 二.方式一:tomcat 使用这种方式无需别的任何配置,只需服务端一个处理类, 服务器端代码 package com.Socket; import java.io
-
Java创建和启动线程的两种方式实例分析
本文实例讲述了Java创建和启动线程的两种方式.分享给大家供大家参考,具体如下: 方式1:继承Thread类 步骤: 1):定义一个类A继承于java.lang.Thread类. 2):在A类中覆盖Thread类中的run方法. 3):我们在run方法中编写需要执行的操作:run方法里的代码,线程执行体. 4):在main方法(线程)中,创建线程对象,并启动线程. (1)创建线程类对象: A类 a = new A类(); (2)调用线程对象的start方法: a.start();//启动一个线程
-
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
本文实例讲述了Python操作MySQL数据库的两种方式.分享给大家供大家参考,具体如下: 第一种 使用pymysql 代码如下: import pymysql #打开数据库连接 db=pymysql.connect(host='1.1.1.1',port=3306,user='root',passwd='123123',db='test',charset='utf8') cursor=db.cursor()#使用cursor()方法获取操作游标 sql = "select * from tes
-
Springboot整合MongoDB进行CRUD操作的两种方式(实例代码详解)
1 简介 Springboot是最简单的使用Spring的方式,而MongoDB是最流行的NoSQL数据库.两者在分布式.微服务架构中使用率极高,本文将用实例介绍如何在Springboot中整合MongoDB的两种方法:MongoRepository和MongoTemplate. 代码结构如下: 2 项目准备 2.1 启动MongoDB实例 为了方便,使用Docker来启动MongoDB,详细指导文档请参考:基于Docker的MongoDB实现授权访问的方法,这里不再赘述. 2.2 引入相关依赖
-
配置vue全局方法的两种方式实例
目录 1,前言 2,第一种方式 3,第二种方式 总结 1,前言 在Vue项目开发中,肯定会有这样一个场景:在不同的组件页面用到同样的方法,比如格式化时间,文件下载,对象深拷贝,返回数据类型,复制文本等等.这时候我们就需要把常用函数抽离出来,提供给全局使用.那如何才能定义一个工具函数类,让我们在全局环境中都可以使用呢?请看下文分解. PS:本文vue为2.6.12 2,第一种方式 直接添加到Vue实例原型上 首先打开main.js,通过import引入定义的通用方法utils.js文件,然后使用V
-
MyBatis批量插入数据到Oracle数据库中的两种方式(实例代码)
一.mybatis批量插入数据到Oracle中的两种方式: 第一种: <insert id="addList" parameterType="java.util.List" useGeneratedKeys="false"> INSERT ALL <foreach item="item" index="index" collection="list"> INTO
-
Android画图之抗锯齿paint和Canvas两种方式实例
在画图的时候,图片如果旋转或缩放之后,总是会出现那些华丽的锯齿.其实Android自带了解决方式. 方法一:给Paint加上抗锯齿标志.然后将Paint对象作为参数传给canvas的绘制方法. paint.setAntiAlias(true); 方法二:给Canvas加上抗锯齿标志. 有些地方不能用paint的,就直接给canvas加抗锯齿,更方便. 复制代码 代码如下: canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_AL
-
C/C++实现快速排序算法的两种方式实例
目录 介绍 流程如下 实现 方式一 方式二 总结 介绍 快速排序是对冒泡排序算法的一种改进,快速排序算法通过多次比较和交换来实现排序. 流程如下 (图片来自百度) 实现 以下有两种实现方式,说是两种,其实就是在交换元素时具体细节上有点不同罢了. 方式一 int Partition(int A[],int low,int high){ int pivot=A[low];//第一个元素作为基准 while(low<high){ while(low<high && A[high]&g