Vue3 + Vite + TS项目引入iconfont图标(Svg方式)

简介: 前言每一个项目都避免不了使用各种各样的图标,如果我们使用了 UI 组件库,比如说 ELement 等,那么组件库有一些封装好的图标供我们使用。但是项目是多变的和复杂的,组件库提供的图标很多时候不能满足需求,这个时候就需要我们自己引入想要的图标了。今天介绍的便是如何将 iconfont 阿里图标库的图标引入到我们的 Vue3 项目中来!

1.常用图标格式简介


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


这里我们主要对比阿里图标库提供 3 种图标引用方式:unicodefont-classsymbol


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.环境准备


为了方便演示以及让大家更容易理解,我直接使用 vite 搭建一个最基本的 Vue3 项目。


创建命令:

npm create vite@latest my-vite-app --template vue-ts


删除 App.vue 中一些不需要的东西,然后运行项目:1.png


3.引入 iconfont

3.1 封装 svg-icon 组件


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

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


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


components 目录下新建 SvgIcon 目录,然后新建 SvgIcon.vue 文件。


代码如下:

// src/components/SvgIcon/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>


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


代码如下:

// main.ts
import { 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')


3.2 引入 iconfont


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

2.png


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


第一种:


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


第二种:


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


第三种:


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


具体使用:


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

3.png


然后在 main.ts 中引入 iconfont.js


代码如下:

import { createApp } from 'vue'
import App from './App.vue'
import SvgIcon from './components/SvgIcon/SvgIcon.vue'
import './assets/iconfont/iconfont.js';
const app = createApp(App)
app.component('SvgIcon', SvgIcon);
app.mount('#app')


4.具体使用


引入 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>


输出结果:

4.png


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


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


总结


图标是一个项目中必不可少的东西,引入图标经常是在我们项目搭建的时候就该完成的,不管你是使用哪种引入图标的方式,都应该遵循一个原则:方便、易理解。


如果觉得文章太繁琐或者没看懂,可以观看视频: 小猪课堂

相关文章
|
3天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
14 0
|
3天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
3天前
|
JavaScript API
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
20 0
|
3天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
25 0
|
3天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
8 1
|
JavaScript
vite-Vue的无捆绑开发服务
vite-Vue的无捆绑开发服务
91 0
|
4天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
15 0
|
4天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
4天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
4天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
9 0