位置: IT常识 - 正文

Vue3 项目引入阿里 iconfont 图标和字体(vue项目引入ts)

编辑:rootadmin
Vue3 项目引入阿里 iconfont 图标和字体

推荐整理分享Vue3 项目引入阿里 iconfont 图标和字体(vue项目引入ts),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue引入amap,vue项目引入elementui,vue怎么引入,vue项目引入axios,vue3引入element,vue3.0引入axios,vue项目引入ts,vue项目引入axios,内容如对您有帮助,希望把文章链接给更多的朋友!

需求:

将 iconfont 阿里图标库的图标与字体引入到我们的 Vue3 + vite + TS 项目中来!

目录1.常用图标格式简介1.1 unicode 格式1.2 font-class 方式1.3 symbol 方式2.项目引入 iconfont2.1 封装 svg-icon 组件2.2 引入 iconfont3.项目中具体使用 iconfont4.项目中使用 阿里字体1.常用图标格式简介

我们使用图标的方式有很多种,比如说直接使用 png、jpg 等图片格式,这是最原始的方式,所以我们这里不过多阐述,它们的优缺点相信大家也知道。

这里我们主要对比阿里图标库提供 3 种图标引用方式:unicode、font-class、symbol。

1.1 unicode 格式

这种方式比较原始,主要是将图标以字体的形式渲染到网页上,既然是以字体的格式,那么它的优缺点也是显而易见的。

特点:

兼容性最好,支持 ie6+,及所有现代浏览器。支持按字体的方式去动态调整图标大小,颜色等等。但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

所以目前来说,我们并不建议以 Unicode 的方式引入 iconfont 图标。

使用方式示例代码:

<i class="iconfont">&#x33;</i>1.2 font-class 方式

font-class 方式本质上还是使用的字体的形式,所以它的优缺点其实和 unicode 方式差不多,但是却运用很广泛,我们可以来看看它的特点,就知道为什么了。

特点:

兼容性良好,支持 ie8+,及所有现代浏览器。相比于 unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 unicode 引用。不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用方式示例代码:

<i class="iconfont icon-xxx"></i>

可以看到它最大的特点就是语义明确,所以这是它很流行的重要原因之一。

1.3 symbol 方式

这种方式相较于而言比较新,它主要利用了 svg 这种格式,在以前,由于它的浏览器兼容性不太好,所以没有大规模的流行。不过就目前来看,兼容性基本上不是问题了,毕竟 IE 都淘汰了。所以它是目前比较推崇的图标引用格式,至于为什么,我们一起来看看它的特点。

特点:

支持多色图标了,不再受单色限制。通过一些技巧,支持像字体那样,通过 font-size,color 来调整样式。兼容性较差,支持 ie9 及现代浏览器。浏览器渲染 svg 的性能一般,还不如 png。

使用示例代码:

<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use></svg>

可以看到它的最大特点就是支持多色图标了,而且还支持向字体那样调整样式了,虽然它的渲染性能不及 png,但是它的其它好处可比 png 多多了,所以我们通常建议项目中使用 symbol 的方式引入图标库。

这也是本篇文章将要讲解的方式。

2.项目引入 iconfont2.1 封装 svg-icon 组件

我们在 iconfont 官网上可以看到给出了 symbol 引用示例,代码如下:

<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use></svg>

上段代码就是图标的具体使用方式,如果我们每次都按照上面的方式使用,那么无疑是很麻烦的,我们不妨将上面的代码封装为一个组件。在需要用到图标的地方直接引入我们的组件即可了。

第一步:在 components 目录下新建 SvgIcon.vue 文件。

代码如下:

// src/components/SvgIcon.vue<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconClassName" :fill="color" /> </svg></template><script setup lang="ts">import { computed } from 'vue';const props = defineProps({ iconName: { type: String, required: true }, className: { type: String, default: '' }, color: { type: String, default: '#409eff' }});// 图标在 iconfont 中的名字const iconClassName = computed(()=>{ return `#${props.iconName}`;})// 给图标添加上类名const svgClass = computed(() => { if (props.className) { return `svg-icon ${props.className}`; } return 'svg-icon';});</script><style scoped>.svg-icon { width: 1em; height: 1em; position: relative; fill: currentColor; vertical-align: -2px;}</style>Vue3 项目引入阿里 iconfont 图标和字体(vue项目引入ts)

第二步:在 main.ts 中全局注册

组件封装好后我们还需要全局注册一下,不然每次引用图标的时候还得单独引入一次该组件。所以我们就在 main.ts 里面全局注册一下。

代码如下:

// main.tsimport { createApp } from 'vue'import App from './App.vue'import SvgIcon from './components/SvgIcon/SvgIcon.vue'const app = createApp(App)app.component('SvgIcon', SvgIcon);app.mount('#app')2.2 引入 iconfont

接下来我们就需要去 iconfont 官网了,新建一个 iconfont 资源库,存放自己的 iconfont。如下图所示:

我们选中 symbol 模式,这里我介绍三种引入方式:

第一种:

直接在线引入官网提供的在线 js 地址,我们直接以 script 标签的形式引入即可。这种方式最为简单,但是也有不好的一点,需要用户有网络环境,而且得保证 iconfont 网站没有崩掉。

第二种:

直接下载至本地,我们从官网直接将代码下载下来,然后放到我们项目中引用,也是可以的。不过这种方式稍显麻烦,每次更新图标库之后都得重新下载一遍。

第三种:

这也是我比较喜欢的方式,也就是将在线地址中的代码直接复制粘贴到我们项目中来,这种方式最为简单,每次更新图标库之后只需要重新复制一下代码即可。这里我们也将采用这种方式。

具体使用:

第一步:在项目 assets 目录下新建 iconfont 目录,在该目录下新建 iconfont.js 文件,然后将 iconfont 在线地址中提供的代码全部复制过来。如下图:

第二步:然后在 main.ts 中引入 iconfont.js。

代码如下:

import { createApp } from 'vue'import App from './App.vue'import SvgIcon from './components/SvgIcon.vue'import './assets/iconfont/iconfont.js';const app = createApp(App)app.component('SvgIcon', SvgIcon);app.mount('#app')3.项目中具体使用 iconfont

引入 iconfont 得过程非常简单,主要分为了以下两步:

封装 svg-icon 组件引入 iconfont 生成的 js 代码

接下来我们就实际使用试试,我们就直接在 App.vue 中引入几个图标试试。

代码如下:

<template> <img alt="Vue logo" src="./assets/logo.png" /> <svg-icon iconName="icon-gongzuoleixing"></svg-icon> <svg-icon iconName="icon-yulan" className="yulan"></svg-icon></template>

可以看到我们的图标已经可以使用了,其中 iconName 属性值就是我们在 iconfont 网站复制的 iconfont 的名称代码。如果想要该颜色或大小,可以自行传入一个类或者 color 属性。

除此之外,如果你有自己下载好的 svg 文件,那么也是可以通过上面方式引入的,只需要将 iconName 改为你自己本地的 svg 名称即可。

4.项目中使用 阿里字体

第一步:在项目 assets 目录下新建 iconfont 目录,在该目录下新建 font.css 文件,然后将 阿里字体在线地址中提供的代码全部复制过来

代码如下:

@font-face { font-family: "思源宋体 Regular"; font-weight: 400; src: url("//at.alicdn.com/wf/webfont/xh4nx6fdEXTy/0jXUXbuJbGMJTGE1-Z9ES.woff2") format("woff2"), url("//at.alicdn.com/wf/webfont/xh4nx6fdEXTy/BXimMREEQDbyuQ0kj-J5S.woff") format("woff"); font-display: swap;}@font-face { font-family: "思源宋体 Medium"; font-weight: 500; src: url("//at.alicdn.com/wf/webfont/xh4nx6fdEXTy/SYySrGV-pN0GFAJ-cof25.woff2") format("woff2"), url("//at.alicdn.com/wf/webfont/xh4nx6fdEXTy/Q9kaOvRthiBt50w-wLg7f.woff") format("woff"); font-display: swap;}

第二步:在main.ts文件中全局引入该文件

import '@/assets/font/font.css'

第三步:在页面中使用字体

.font-text {font-family: "思源宋体 Medium";}
本文链接地址:https://www.jiuchutong.com/zhishi/294470.html 转载请保留说明!

上一篇:Android Studio安装和使用教程(全文图解)

下一篇:Nā pali海岸上的Bright Eye海蚀洞,夏威夷考艾岛 (© jimkruger/Getty Images)(海岸边上)

  • soul声音怎么关(soul声音怎么关掉)

    soul声音怎么关(soul声音怎么关掉)

  • XR左上角有个印子怎么解决

    XR左上角有个印子怎么解决

  • 华为p40充满电要多久(华为p40充满电要2小时)

    华为p40充满电要多久(华为p40充满电要2小时)

  • 变频器显示oc1是什么故障(变频器显示oc1是啥意思)

    变频器显示oc1是什么故障(变频器显示oc1是啥意思)

  • 苹果减弱动态效果需要不需要打开(苹果减弱动态效果关闭好还是打开)

    苹果减弱动态效果需要不需要打开(苹果减弱动态效果关闭好还是打开)

  • ios14支持6s吗(ios14.6支持6s吗)

    ios14支持6s吗(ios14.6支持6s吗)

  • 属于微机网络所特有的设备是(微机进行联网,这个网络属于)

    属于微机网络所特有的设备是(微机进行联网,这个网络属于)

  • pr导出手机视频格式选什么(pr导出手机视频不清晰)

    pr导出手机视频格式选什么(pr导出手机视频不清晰)

  • 华为p3024小时制怎么调(华为如何设置时间为24小时制p30)

    华为p3024小时制怎么调(华为如何设置时间为24小时制p30)

  • 如何给文字加双波浪下划线(如何给文字加双下划线)

    如何给文字加双波浪下划线(如何给文字加双下划线)

  • mde2是全网通吗(mde6是什么型号手机)

    mde2是全网通吗(mde6是什么型号手机)

  • 探探如何跳过设备认证(探探如何跳过设置验证)

    探探如何跳过设备认证(探探如何跳过设置验证)

  • v1829a是什么手机型号(v1981a是什么手机)

    v1829a是什么手机型号(v1981a是什么手机)

  • 手机上面的hd是什么意思(手机上面的hd是什么意思,怎么关OPPO)

    手机上面的hd是什么意思(手机上面的hd是什么意思,怎么关OPPO)

  • 手机qq怎么转发语音(手机qq怎么转发聊天记录)

    手机qq怎么转发语音(手机qq怎么转发聊天记录)

  • 快手直播伴侣为何闪退(快手直播伴侣为什么老是自己停止)

    快手直播伴侣为何闪退(快手直播伴侣为什么老是自己停止)

  • 密封线内的花纹怎么弄(密封线内的花纹叫什么)

    密封线内的花纹怎么弄(密封线内的花纹叫什么)

  • 抖音点亮了什么意思(抖音点亮次数每天都有吗)

    抖音点亮了什么意思(抖音点亮次数每天都有吗)

  • 转转退款多久到账(转转退款能立马到账吗)

    转转退款多久到账(转转退款能立马到账吗)

  • 微信视频过期怎么办(微信视频过期怎么下载)

    微信视频过期怎么办(微信视频过期怎么下载)

  • 华为p30的主要特点是什么(华为p30的特点)

    华为p30的主要特点是什么(华为p30的特点)

  • 苹果电脑怎么更新系统升级(苹果电脑怎么更换id账号)

    苹果电脑怎么更新系统升级(苹果电脑怎么更换id账号)

  • cad图纸尺寸设置(cad图纸尺寸设置a4)

    cad图纸尺寸设置(cad图纸尺寸设置a4)

  • 华为p30处理器型号(华为p30的处理器是)

    华为p30处理器型号(华为p30的处理器是)

  • linux系统常用命令有哪些? semicolon命令的使用方法(linux常用的命令大全)

    linux系统常用命令有哪些? semicolon命令的使用方法(linux常用的命令大全)

  • phpcms提示服务器安全认证错误(php服务器地址怎么填)

    phpcms提示服务器安全认证错误(php服务器地址怎么填)

  • 公司代扣个人所得税有完税凭证明
  • 制造费用科目一定无余额
  • 记账错误怎么办
  • 待处理财产损益借方
  • 盈利能力也可以反映短期偿债能力
  • 政府补贴款需要缴纳增值税
  • 汽车维修公司做账基本流程
  • 票种核定表怎么填写
  • 国外进口原材料会计处理
  • 无形资产可以一次性摊销吗?
  • 购买金税盘抵扣
  • 电子承兑汇票如何撤回
  • 预期收益率计算器
  • 单位定期存款如遇利率调整,不论调高调低
  • 百分百控股股东叫什么
  • 计提和缴纳税会计分录
  • 固定资产账载金额和税收金额的区别
  • 企业只有收入没有支出是否违规
  • 商业折扣和现金折扣的区别
  • 扣押属于纳税担保吗
  • 小微企业减免的税金怎么做账
  • 商贸企业可以使用月末一次加权平均
  • 投资收益是否缴纳印花税
  • 海关完税价格表
  • 年底自查
  • 食堂费用计入应付职工薪酬吗
  • 所得税季报填写说明
  • 认证专票税务处理怎么做?
  • 委托贷款利息收入怎么开发票
  • 增值税专用发票有效期是多长时间
  • 上缴国家利润应计入什么会计分录?
  • 小规模自开专票税率是1%还是3%
  • 企业押金怎么管理
  • 存货盘亏进项税额转出会计分录怎么做
  • win10提示病毒防护已过期
  • 如何将旧版本软件卸载
  • 月末是指
  • 电脑管家系统异常要修复吗
  • 用系统自带命令行安装WIN10
  • 结转损益和结转成本
  • 独资子公司如何注册
  • 附有退货条款的销售
  • 关于农产品的法律
  • chat gpt介绍开头
  • 库存股属于什么类账户
  • 办公楼改造方案
  • 应收票据年末计息的分录
  • 增值税报了所得税未报可以买发票吗
  • 月底资产负债表不平怎么找原因
  • 用友财务软件使用视频教程
  • 试生产产品计入研发费用吗
  • 研发费用资本化计入什么科目
  • 垃圾处理费计入办公费用吗
  • 验证码php代码
  • 小规模缴纳印花税吗怎么做账
  • 应付账款尾差如何处理
  • 各人所得税法规定
  • 税控系统的维护包括哪些内容
  • 如何查询继续教育ic卡号
  • 取得费用报销单怎么填写
  • 社保账务会计分录2019
  • 小规模纳税人应交税费的二级科目
  • 仓库包材问题和造成的后果
  • 投资性房地产折旧和摊销的区别
  • 固定资产的原价减去预计净残值后的余额
  • 固定资产如何管理
  • 企业成立前期的重点工作
  • windows 8
  • windowsxp开机加载页面不动
  • win7浏览器在c盘哪里
  • win8开始界面如何设置成win7
  • windows7开机后显示配置失败
  • 使用 WinSCP 管理 Linux VPS/服务器上的文件 图文教程
  • easyui给下拉框赋值
  • node.js的安装方法
  • python解析数据
  • python 控制台交互
  • 外部js获取当前vue实例
  • 没有单位怎么交职工养老保险
  • 税务登记证的电子版在哪
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设