2024年前端最全小白详解Vue3项目中怎么引入 SVG 图标_vue3 svg(2)，字节面试官职级

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

既然是页面，肯定离不开一些图标 icon ，所以肯定要去最全的 阿里图标库 来寻找

这里讲解下如何将 阿里图标库 里面的东西，放到我们的页面上

阿里图标库

进入页面，找到 资源管理 下面的 我的项目，并创建项目

设置如下

创建好项目后，我们进入到 阿里的 素材库 里面找一些后续需要的图标，

并添加到 购物车 中，

将 购物车 里面的图标添加到项目中

之前会有在线的图标链接地址，让我们进行引入即可。

但是现在没找到，应该是得下载到本地 然后进行使用= =

那我们只能将项目里的图标，选择 Symbol 并 下载至本地

将其放到 src\assets\svg 目录下

进行解压，删除不必要的东西，只留下 iconfont.js 文件即可

之后在 main.ts 中进行全局导入

import './assets/svg/iconfont.js'

项目中引入 svg-icon

在 src 目录下，创建一个用于存放插件的目录 plugin

// index.vue
 
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconClassName" :fill="color" />
  </svg>
</template>
 
<script setup>
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}`
  }


### 总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![image](https://img-blog.csdnimg.cn/img_convert/94888670034a8fb1896c0945d5cbc6ff.webp?x-oss-process=image/format,png)
![image](https://img-blog.csdnimg.cn/img_convert/519cc9016937cc557cc7c3a984666104.webp?x-oss-process=image/format,png)

sdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-x4KiX0uU-1715533270892)]
[外链图片转存中...(img-9uGSe3mc-1715533270893)]