小白详解Vue3项目中怎么引入 SVG 图标

这篇具有很好参考价值的文章主要介绍了小白详解Vue3项目中怎么引入 SVG 图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天一淘模板给大家来详解Vue3项目中怎么引入 SVG 图标具体流程

SVG 图标

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

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

阿里图标库

小白详解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
 
<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.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)

在 页面中进行使用

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

小白详解Vue3项目中怎么引入 SVG 图标

可以看到 SVG 图标成功展示

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

引入 阿里的 SVG 图标到项目中。文章来源地址https://www.toymoban.com/news/detail-491637.html

到了这里,关于小白详解Vue3项目中怎么引入 SVG 图标的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3项目中引入ElementUI使用详解

    ElementUI 是一个强大的PC端UI组件框架,它不依赖于vue,但是却是当前和vue配合做项目开发的一个比较好的ui框架,其包含了布局( layout ),容器( container )等各类组件,基本上能满足日常网站的搭建开发。针对vue2和vue3都有对应的组件版本,本文主要介绍在vue3中如何引入使用

    2024年02月10日
    浏览(49)
  • vue3+vite+ts 通过svg-sprite-loader 插件使用自定义图标

    第一步 首先下载svg插件和fs模块; 后续需要用到 第二步新建文件夹和文件 将下载好的svg文件放入新建好的svg文件夹中 index.vue 代码 这里是创建一个 svg-icon / 组件 index.ts 代码 第三步 打开main.ts 将创建好的 svg-icon / 组件注入到全局组件 第四步 在根目录打开vite.config.ts ** 如果引

    2024年02月15日
    浏览(41)
  • vue3 vue.config.js配置Element-plus组件和Icon图标实现按需自动引入

    打包时,报警告,提示包太大会影响性能 在页面直接使用,直接使用 SVG 图标,当做一般的 svg 使用 icon使用时需要用以下两种方式方式: 如果用在el-button里面的icon属性上使用,用SVG方式无效,还是需要引入再使用(不知道有没有其他方式) 注意: 使用 :icon=\\\"Edit\\\" 则icon的大

    2024年02月06日
    浏览(65)
  • 关于vue3+版本引入element-ui使用icon问题 (icon不显示问题)vue3中input里面不显示icon图标

    1)、引入  2)、效果: 出来了一个大图标  3)、代码 1)、引入  2)、效果:  3)、代码

    2024年02月16日
    浏览(53)
  • 怎么修改svg的颜色? img引入svg图片怎么修改颜色的三种方法

    效果图 此时css对svg文件无法生效,此时要用到CSS3滤镜filter中的drop-shadow,通过生产一个可指定颜色的阴影放置于svg的位置,并将原始svg移出视线 效果图 如果项目中用到svg比较多,前两种方法会比较啰嗦,每次写一遍方法二的样式比较麻烦,这时可以考虑封装组件, 结合实际需要

    2024年02月11日
    浏览(52)
  • vue3项目中引入ts

    提示:文章是基于vue3的项目基础上引入ts vue create vue3-ts 选择自定义预设,ts设置未选中状态 选择yarn与npm启动项目(根据个人,在这里我选择yarn) 问题一: 问题二: 问题一 在script 标签中引入ts后,会产生JSX语法错误,这时我们需要引入ts(全局引用与局部引用) 第一步:

    2023年04月10日
    浏览(40)
  • vue3+ts+vite项目引入echarts,vue3项目echarts组件封装

    技术栈 :Vue3 + Ts + Vite + Echarts 简介 : 图文详解,教你如何在 Vue3 项目中 引入Echarts , 封装Echarts组件 ,并实现常用Echarts图例 1.1 静态效果 1.2 动态效果 2.1 安装 Echarts npm: pnpm: 2.2 main.ts 中引入 2.3 Echarts 组件封装 /src/components/ReEcharts/index.vue 文件中写入如下代码 3.1 柱状图 实现

    2024年02月09日
    浏览(60)
  • 前端项目,个人笔记(二)【Vue-cli - 引入阿里矢量库图标 + 吸顶交互 + setup语法糖】

    目录 1、项目中引入阿里矢量库图标 2、实现吸顶交互 3、语法糖--script setup 3.1、无需return  3.2、子组件接收父组件的值-props的使用 3.3、注册组件 步骤一 :进入阿里矢量库官网中:iconfont-阿里巴巴矢量图标库  ,挑选自己需要的图标:         我在查看其他博主的博客时

    2024年04月16日
    浏览(59)
  • Vue3项目中引入html页面

    Vue3项目中引入html页面,通常是需要实现 跳转 加载html页面的功能。之前为了实现需求查找解决方法时多数推荐使用iframe标签实现,尝试后发现iframe是将html页面嵌入到vue中,不符合自身的需求。总结方法如下: 1.导入文件 将需要导入的文件(单个文件或是项目)放置于publi

    2024年02月15日
    浏览(35)
  • electron+vue3全家桶+vite项目搭建【24】设置应用图标,打包文件的图标

    demo项目地址 在electron中,我们可以通过electron-builder的配置文件来设置打包后的应用图标 因为mac环境下的图标需要特殊格式,这里我们可以利用electron-icon-builder进行配置 1.引入相关依赖 加入安装过程中卡在了 phantomjs-2.1.1-windows.zip的下载,可以直接去github上下载 这里我也放一

    2024年02月17日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包