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

相关推荐

  • windows xbox登录账号没反应如何解决

    xbox登录账号没反应解决方法: 方法一: 1、我们可以尝试先在电脑中登录微软账号,这样打开xbox就不需要登录了。 2、首先我们进入系统设置。 3、然后打开“账户” 4、在其中选择“改用Microsoft账户登录” 方法二: 1、首先我们以管理员身份运行“windows powershell” 2…

    2022年9月20日
    28600
  • Linux环境下怎么使用Docker搭建Jenkins容器

    需要提前准备的条件 Maven环境 Docker环境 JDK环境(Centos8 自带JDK环境去除,重装的JDK) Step1:安装Jenkins镜像 用docker查询jenkins镜像 docker search jenkins 我们选择下载第二个,jenkins/jenkins,下载命令 d…

    2022年9月20日
    17400
  • css样式中calc的含义是什么

    在css中,calc是计算的意思;calc可以理解为一个函数function,是calculate的缩写,用来指定一个元素的长度,calc可以给元素做计算,使用指定的单位值计算出长度值,语法为“元素{长度属性:calc(表达式)}”。 本教程操作环境:windows10系统、CSS3&&am…

    2022年9月15日
    23200
  • Apache Flink未授权访问远程代码命令执行的复现

    Apache Flink未授权访问-远程代码命令执行漏洞复现 Apache Flink Dashboard默认没有用户权限认证。攻击者可以通过未授权的Flink Dashboard控制台,直接上传木马jar包,可远程执行任意系统命令获取服务器权限,风险极大。 二、影响版本 Apache Flink …

    2022年9月10日
    91700
  • 如何分析Win7蓝屏的解读和应对方案

    近期,深信服接到不少客户咨询关于Win7蓝屏大爆发的问题,大概内容指“Win7服役结束,微软不再更新补丁,电脑集体蓝屏,错误代码为F4,蓝屏与漏洞补丁有关联等等,并呼吁用户不要修复漏洞补丁”。 不过,从深信服收集上来的问题来看,并没有出现企业大规模Win7蓝屏的现象。我们通过追溯,发现比较早出现这一…

    2022年9月6日
    14300
  • 如何搭建zabbix监控及邮件报警

    一、zabbix 1.1 简介 zabbix 是一款开源的功能强大的分布式监控系统,一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。 zabbix server可以通过SNMP,zabbix agent,ping,端口监视等方法提供对远程服务器/网络状态的监视。 zab…

    2022年9月18日
    26600
  • mysql的2002错误怎么解决

    在mysql中,2022错误指的是编译的时候没有指定socket,所以mysql命令连接的时候还是使用的默认值,因为socket位置变了,而mysql命令不知道,所以就出现了这样的错误,可以修改“/etc/my.cnf”文件来解决该错误。 本教程操作环境:windows10系统、mysql8.0.2…

    2022年9月1日
    38900
  • JavaScript怎么取消请求

    取消 XMLHttpRequest 请求 当请求已经发送了,可以使用 XMLHttpRequest.abort() 方法取消发送,代码示例如下: const xhr = new XMLHttpRequest();xhr.open(‘GET’, ‘&lt;http://127.0.0.1:30…

    2022年9月15日
    15800
  • C++怎么实现两个线程交替打印

    首先简单搭一个框架,让两个线程先尝试实现交替打印。 //实现两个线程交替打印#include <iostream>#include <thread>using namespace std;int main(void){ int n = 100; int i = 0; //创建…

    2022年8月27日
    34000
  • jmeter正则表达式提取器怎么使用

    使用方法 1,把正则表达式添加到需要提取返回内容的http请求里,添加步骤是,,右键http请求–添加–后置处理器–正则表达式处理器 2,在正则表达式提取器配置设置页里, 1)要检查的响应字段:相当于是要提取哪个位置的内容数据 2)引用名称:我们把内容提取出来后要…

    2022年9月21日
    29900
联系我们
站长微信
站长微信
电话联系

400-800-1024

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

分享本页
返回顶部