Vue3项目中如何引入SVG图标

SVG 图标

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

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

阿里图标库

Vue3项目中如何引入SVG图标

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

设置如下

Vue3项目中如何引入SVG图标

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

并添加到 购物车 中,

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

Vue3项目中如何引入SVG图标

Vue3项目中如何引入SVG图标

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

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

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

Vue3项目中如何引入SVG图标

将其放到 srcassetssvg 目录下

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

Vue3项目中如何引入SVG图标

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

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

项目中引入 svg-icon

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

Vue3项目中如何引入SVG图标

// 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}`  }  return 'svg-icon'})</script><style scoped>.svg-icon {  width: 1em;  height: 1em;  position: relative;  fill: currentColor;  vertical-align: -2px;}</style>
// index.tsimport { App } from 'vue'import SvgIcon from './index.vue'export function setupSvgIcon(app: App) {  app.component('SvgIcon', SvgIcon)}

之后在 main.ts 中进行注册组件

import { setupSvgIcon } from './plugin/SvgIcon/index'setupSvgIcon(app)

在 页面中进行使用

<template>  <div> 工作台页面 </div>  <svg-icon iconName="icon-bianjishuru" /></template>

Vue3项目中如何引入SVG图标

可以看到 SVG 图标成功展示

感谢各位的阅读,以上就是“Vue3项目中如何引入SVG图标”的内容了,经过本文的学习后,相信大家对Vue3项目中如何引入SVG图标这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

文章标题:Vue3项目中如何引入SVG图标,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/21882

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云
上一篇 2022年8月31日 下午11:20
下一篇 2022年8月31日 下午11:21

相关推荐

  • 猫鼠服务器是什么公司

    猫鼠(Cats and Mouse)服务器可能是您要询问的一种服务器类型,或者是一个特定服务器名称的误解,但在知识库中并无明确的记录表示猫鼠服务器代表着一个具体的公司。如果您是在询问一个公司或品牌名为“猫鼠”的服务器供应商,可能需要提供更多信息或者具体的上下文才能得出准确答案。如果您实际上指的是一个…

    2024年4月25日
    8200
  • 推理服务器作用是什么

    摘要 推理服务器的作用是1、执行模型推理任务、2、优化推理性能、3、降低延迟、4、提高吞吐量、5、支持多种模型格式、6、提供模型管理与扩展功能。 在这些核心功能中,优化推理性能尤为关键,因为它直接关系到模型部署后的效率和稳定性。推理服务器通过使用专门的算法和硬件加速技术,大幅提高处理速度,同时保持高…

    2024年4月25日
    10500
  • 服务器管理的好处是什么

    摘要 服务器管理的好处包括: 1.提高安全性、2.增强性能、3.确保数据完整性、4.优化资源利用,等重要方面。特别是提高安全性,这是服务器管理中的关键部分,为防止未授权访问、数据泄露和其他潜在威胁,定期对服务器进行维护和更新至关重要。此外,安装安全软件、监控系统漏洞、及时打补丁和执行严格的访问控制策…

    2024年4月25日
    9000
  • 云服务器存储资料是什么

    摘要 云服务器存储资料是1、通过网络访问的远程服务器上存储的数据,其依赖于2、云计算技术,使得数据存取更加灵活和高效。在这两点中,通过网络访问的远程服务器存储意味着用户无需对物理硬件进行管理或投入高额的初期成本,而是通过互联网连接到远程数据中心,实现数据存储和管理。这种模式不仅降低了企业或个人的技术…

    2024年4月25日
    8600
  • 下挂的服务器叫什么

    摘要:下挂的服务器通常被称作1、边缘服务器或2、即服务外设。其中,边缘服务器主要用于提高网络服务的访问速度和提升用户体验。通过布局在接近最终用户的地理位置上,这种服务器能够缓存内容,减少数据传输的延迟,加快载入速度,有效缓解主服务器的负荷。边缘服务器尤其适用于内容交付网络(CDN)和大数据分析等场景…

    2024年4月25日
    10500
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部