重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要讲解了“Vue3项目中如何引入SVG图标”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue3项目中如何引入SVG图标”吧!
成都创新互联2013年至今,是专业互联网技术服务公司,拥有项目成都网站制作、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元佛坪做网站,已为上家服务,为佛坪各地企业和个人服务,联系电话:18980820575
既然是页面,肯定离不开一些图标 icon ,所以肯定要去最全的 阿里图标库 来寻找
这里讲解下如何将 阿里图标库 里面的东西,放到我们的页面上
进入页面,找到 资源管理 下面的 我的项目,并创建项目
设置如下
创建好项目后,我们进入到 阿里的 素材库 里面找一些后续需要的图标,
并添加到 购物车 中,
将 购物车 里面的图标添加到项目中
之前会有在线的图标链接地址,让我们进行引入即可。
但是现在没找到,应该是得下载到本地 然后进行使用= =
那我们只能将项目里的图标,选择 Symbol 并 下载至本地
将其放到 src\assets\svg 目录下
进行解压,删除不必要的东西,只留下 iconfont.js 文件即可
之后在 main.ts 中进行全局导入
import './assets/svg/iconfont.js'
在 src 目录下,创建一个用于存放插件的目录 plugin
// index.vue
// index.ts import { 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)
在 页面中进行使用
工作台页面
可以看到 SVG 图标成功展示
感谢各位的阅读,以上就是“Vue3项目中如何引入SVG图标”的内容了,经过本文的学习后,相信大家对Vue3项目中如何引入SVG图标这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!