重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Vue3项目中如何引入SVG图标

这篇文章主要讲解了“Vue3项目中如何引入SVG图标”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue3项目中如何引入SVG图标”吧!

成都创新互联2013年至今,是专业互联网技术服务公司,拥有项目成都网站制作、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元佛坪做网站,已为上家服务,为佛坪各地企业和个人服务,联系电话:18980820575

SVG 图标

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

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

阿里图标库

Vue3项目中如何引入SVG图标

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

设置如下

Vue3项目中如何引入SVG图标

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

并添加到 购物车 中,

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

Vue3项目中如何引入SVG图标

Vue3项目中如何引入SVG图标

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

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

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

Vue3项目中如何引入SVG图标

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

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

Vue3项目中如何引入SVG图标

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

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

项目中引入 svg-icon

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

Vue3项目中如何引入SVG图标

// index.vue




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'
})



.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
// 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)

在 页面中进行使用

Vue3项目中如何引入SVG图标

可以看到 SVG 图标成功展示

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


网站标题:Vue3项目中如何引入SVG图标
本文URL:http://cqcxhl.com/article/gjiieo.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP