首页- 站长资讯 技术文章  深入浅析vue3+vite中怎么使用svg图标

深入浅析vue3+vite中怎么使用svg图标

 0  2022-05-01 00:23:06

svg图片在项目中使用的非常广泛,下面本篇文章带大家介绍一下如何在vue3 + vite 中使用svg图标,希望对大家有所帮助!

 

vite-plugin-svg-icons

预加载 在项目运行时就生成所有图标,只需操作一次 dom

高性能 内置缓存,仅当文件被修改时才会重新生成

安装

node version: >=12.0.0 vite version: >=2.0.0

  1. yarn add vite-plugin-svg-icons -D
  2. # or
  3. npm i vite-plugin-svg-icons -D
  4. # or
  5. pnpm install vite-plugin-svg-icons -D

使用

vite.config.ts 中的配置插件

  1. import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
  2. import path from 'path'
  3.  
  4. export default () => {
  5.   return {
  6.     plugins: [
  7.       createSvgIconsPlugin({
  8.         // 指定需要缓存的图标文件夹
  9.         iconDirs: [path.resolve(process.cwd(), 'src/icons')],
  10.         // 指定symbolId格式
  11.         symbolId: 'icon-[dir]-[name]',
  12.  
  13.         /**
  14.          * 自定义插入位置
  15.          * @default: body-last
  16.          */
  17.         // inject?: 'body-last' | 'body-first'
  18.  
  19.         /**
  20.          * custom dom id
  21.          * @default: __svg__icons__dom__
  22.          */
  23.         // customDomId: '__svg__icons__dom__',
  24.       }),
  25.     ],
  26.   }
  27. }

在 src/main.js 内引入注册脚本

  1. import 'virtual:svg-icons-register'

如何在组件中使用

创建SvgIcon组件

/src/components/SvgIcon/index.vue

  1. <template>
  2.   <svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size">
  3.     <use :xlink:href="symbolId" :fill="props.color" />
  4.   </svg>
  5. </template>
  6.  
  7. <script setup>
  8. import { computed } from 'vue'
  9. const props = defineProps({
  10.   prefix: {
  11.     type: String,
  12.     default: 'icon'
  13.   },
  14.   name: {
  15.     type: String,
  16.     required: true
  17.   },
  18.   color: {
  19.     type: String,
  20.     default: '#333'
  21.   },
  22.   size: {
  23.     type: String,
  24.     default: '1em'
  25.   }
  26. })
  27.  
  28. const symbolId = computed(() => `#${props.prefix}-${props.name}`)
  29. </script>

icons目录结构

  1. # src/icons
  2.  
  3. - icon1.svg
  4. - icon2.svg
  5. - icon3.svg
  6. - dir/icon1.svg

全局注册组件

  1. # src/main.js
  2.  
  3. import { createApp } from 'vue'
  4. import App from './App.vue'
  5. import router from './router'
  6.  
  7. import ElementPlus from 'element-plus'
  8. import 'element-plus/dist/index.css'
  9.  
  10. import svgIcon from "@/components/SvgIcon/index.vue";
  11. import 'virtual:svg-icons-register'
  12.  
  13. createApp(App)
  14.     .use(ElementPlus)
  15.     .use(router)
  16.     .component('svg-icon', svgIcon)
  17.     .mount('#app')

页面使用

  1. <template>
  2.     <svg-icon v-if="props.icon" :name="props.icon" />
  3.     <span v-if="props.title" slot='title'>{{ props.title }}</span>
  4. </template>
  5.  
  6. <script setup>
  7.  
  8. const props = defineProps({
  9.     icon: {
  10.         type: String,
  11.         default: ''
  12.     },
  13.     title: {
  14.         type: String,
  15.         default: ''
  16.     }
  17. })
  18. </script>

获取所有 SymbolId

  1. import ids from 'virtual:svg-icons-names'
  2. // => ['icon-icon1','icon-icon2','icon-icon3']

相关说明:

1、VIP会员无限制任意下载,免积分。 立即前往开通>>

2、本站资源大多存储在云盘,如出现链接失效请评论反馈。

3、本站提供的源码、模板、软件工具等其他资源,均不包含技术服务,请大家谅解!资源仅供参考学习只用,请勿用于任何商业用途,请支持正版。

4、源码、模板等资源会随着技术、坏境的升级而存在部分问题,还请慎重选择。


本文网址:http://www.zzdaima.com/art/37.html
转载请声明来自: 站长代码- 深入浅析vue3+vite中怎么使用svg图标

教程搜索
热门技术文章
  • pbootcms伪静态教程

    pbootcms伪静态教程

    Apache环境和IIS环境默认在根目录加了伪静态规则了,不需要操作,只要主机支持伪静态即可。 Nginx环境,请打开nginx.txt文件,把里面的代码复制到配置中,下面我们以宝塔为例, 伪静态规则的文件在 这样就完成了

  • 关于域名历史的查询和处理

    关于域名历史的查询和处理

    一、域名历史是什么意思?域名历史,是指域名首次注册的时间、域名持有者更新、域名网站所属行业变更、域名是否被降权或K站、域名历史PR值、域名历史的外链建设情况、域名年龄等等。二、域名历史对SEO有影响因素马慧SEO简单列出几点域名历史对网站优化的影响:①域名历史是否

  • 网站建设这些东西我们需要设置好

    网站建设这些东西我们需要设置好

    一、建站的需求及目的建站的目的时什么,需求又是什么,依据自己的需求及行业的对比,大概做出一个小的预算。通常情况下,若作为单一的企业网站,建站费用不高,若需要定制开发的话,定制开发所需要的费用肯定比一般的企业网站要高,网站定制开发流程:沟通确定需求-出设计效

  • 怎么样才能写出打动读者的文案

    怎么样才能写出打动读者的文案

    第一,标题要准确简洁一篇高质量的文章内容,首先必须要有一个简洁明确的题目标题,能够让读者一下就可以抓住你要表达的文章意思。而有些SEO优化人员,为了图省事,往往采用采集文章的方式更新内容,但又考虑到雷同性太高,于是就随便更换一个文章标题了事。这样做的后果就是

  • 寻找合适的关键词给网站创收

    寻找合适的关键词给网站创收

    选择垂直行业领域关键词大家在选择关键词的时候,记住一定不能太宽泛,因为我们是个人站长,不可能投入那么多的人力物力去经营一个有大量内容的网站,如果网站主体太广,我们是根本没有精力去管理的,那么排名自然也是无法上来的,这里如风SEO强烈建议大家一定要找准一个垂直

  • 可能被我们忽视的影响排名因素

    可能被我们忽视的影响排名因素

    一、质量高的原创内容在这个越来越注重内容的时代,各位站长要想在百度、360等搜索引擎获得不菲的流量,那必须注重网站内容的原创性。独特的实质性的并且是高质量的原创内容,极大的影响着网站的收录和排名。现下正火热的熊掌号就是百度针对原创内容的一次尝试,高质量的原创

热门推荐

SEO按天关键词计费排名查询系统...

热门推荐  80    2022-05-01 08:02:08

软件功能:1.会员管理:系统共分三级会员流程。总站管理员,代理,...

仿清风DJ舞曲网V4.1+CSCMS音乐...

热门推荐  70    2022-05-01 07:54:10

CSCMSV4.1仿清风dj舞曲网音乐网站源码,程序是CSCMSV4.1UTF8编码...

爱看小说网2W本源码全站打包源...

热门推荐  81    2022-05-01 07:50:03

本次给大家带来的是价值500元的狂雨小说二开版上传源码解压后/co...

APP软件应用下载导航网站源码/...

热门推荐  85    2022-05-01 07:38:50

APP软件应用下载导航网站源码/APP分享下载页引流导航网站源码带后...

健身类小程序前后端源码

热门推荐  134    2022-04-24 15:40:08

健身类小程序前后端源码环境要求:PHP>=7.0(推荐7.2+)Laravel5...

抖音云蹦迪源码 2022年很火的直...

热门推荐  265    2022-04-18 21:17:36

外面卖600的抖音云蹦迪直播间项目,靠直播打赏收益的风口项目分享...


关于我们 联系我们 免责声明 共享规则 SiteMap 站长代码所有作品均为会员提供或网上搜集,版权归原作者所有,如需商业用途或转载请与原作者联系

Copyright © 2022  站长代码版权所有 辽ICP备2021012267号-1 辽公网安备 21012202000096号 所提供的内容仅供观摩学习交流之用,请勿用作商业用途!如有侵权,请及时 联系我们删除

第三方账号一键登录