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

相关推荐

  • SQL Server备份数据库的方法

    一.首先把当前的数据库备份成一个文件 1.按照操作来,选择对应的数据库, 确定备份文件的存储位置 点击确定,生成备份文件。 2.然后可以通过该备份文件还原数据库。 右键数据库点击还原文件和文件组 然后设置目标数据库的名字,如果数据库中已经存在相同名字的,则需要修改或者删除原来同名的数据库,然后在选择…

    2022年9月11日
    11100
  • SQL注入语法有哪些

    仅供参考学习使用。 SQL注入语法 报错注入 updatexml(1,concat(0x7e,(select database()),0x7e),1)–+extractvalue(1,concat(0x7e,(select database()),0x7e),1)–+select count(*…

    2022年9月6日
    11500
  • 基于签名算法且简单安全的API授权机制是什么

    笔者以前在做广告系统时发现对接的大多数平台的广告系统都是以token方式授权接口,而且这个token是一直不变的,由广告主提供,可以说这就是裸奔的接口,只不过这种接口对安全性要求不高,这只能防止恶意调用以及验证渠道的身份。 去年笔者写过一个API统一授权平台,为内部服务开放接口给第三方系统调用提供统…

    2022年9月8日
    13500
  • Swift的Mirror反射怎么使用

    元类型与.self AnyObject 在Swift开发中,我们经常会使用AnyObject来代表任意类的实例、类的类型、以及仅类遵守的协议。 代表任意类的实例、类的类型 class LGTeacher { var age = 18}var t = LGTeacher()var t1: AnyObj…

    2022年9月24日
    22700
  • 为什么好的领导能给你安全感?

    观点源自TED演讲 :《西蒙西·内克: 为什么好的领导能给你安全感?》 管理理论学家西蒙西·内克在TED曾分享过一个观点:好的领导应该让他的员工有安全感和信任感,和他/她一起工作让员工能感到进入了生活“安全区”。 但是创造信任与安全,尤其是在不平等的经济环境中,意味着要承担巨大的责任。 西蒙西·内克…

    2022年3月20日
    44900
  • css中的选择器包不包括超文本标记选择器

    不包括。css选择器有:1、标签选择器,是通过HTML页面的元素名定位具体HTML元素;2、类选择器,是通过HTML元素的class属性的值定位具体HTML元素;3、ID选择器,是通过HTML元素的id属性的值定位具体HTML元素;4、通配符选择器“*”,可以指代所有类型的标签元素,包括自定义元素;…

    2022年9月1日
    19900
  • MySQL日志之redo log和undo log的知识点有哪些

    本篇内容介绍了“MySQL日志之redo log和undo log的知识点有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! Redo Log REDO LOG称为重做日志 ,当MySQL服务器意外…

    2022年8月30日
    47800
  • 如何逆向分析Spotify.app并hook其功能获取数据

    项目 该项目的目标是构建一个Spotify客户端,让它能够学习我的听曲习惯并跳过一些我通常会跳过的歌曲。不得不承认,这种需求来自于我的懒惰。我不想在当我有心情想要听某些音乐时,创建或查找播放列表。我希望的是在我的库中选择一首歌,然后可以随机播放其他歌曲,并从队列中删除不“flow(节奏与旋律的流畅)…

    2022年9月8日
    20600
  • laravel是不是aop

    laravel不是aop;aop是“Aspect Oriented Programming”的缩写,意为面向切面编程,是通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术,而laravel不是面向切片编程,laravel中间件提供了一种方便的机制来检查和过滤进入应用程序的HTTP请求是…

    2022年9月1日
    7500
  • word文档怎么转换成pdf格式

    word文档转换成pdf格式方法: 1、打开word,打开需要转换的文档。 2、点击左上角的文件选项,如图。 3、选择导出功能。 4、选择创建PDF/XPS文档,点击创建 5、选择合适的位置,自定义文件的名称即可。 6、此时打开文件的格式就已经被转换为PDF文件。 到此,相信大家对“word文档怎么…

    2022年9月19日
    6100
联系我们
站长微信
站长微信
分享本页
返回顶部