vite svg 插件

最新推荐文章于 2024-05-19 08:52:24 发布
最新推荐文章于 2024-05-19 08:52:24 发布
阅读量760 收藏
点赞数 1
文章标签： javascript ecmascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/batman_yr/article/details/121465219
版权

vite2 vue3 加载svg 图片

import { readFileSync, readdirSync } from 'fs'
const path = require('path')

const svgTitle = /<svg([^>+].*?)>/
const clearHeightWidth = /(width|height)="([^>+].*?)"/g

const hasViewBox = /(viewBox="[^>+].*?")/g

const clearReturn = /(\r)|(\n)/g

/**
 * @Date 2021/11/22
 * @Author Varus
 * @Description: 找到svg 图片并且替换文件信息
 * @param dir svg 目录
 * @param idPreFix svg symbol id
 *
 */
function findSvgFile(dir, idPreFix) {
    const svgRes = []
    const dirEntries = readdirSync(dir, {
        withFileTypes: true
    })
    for (const dirent of dirEntries) {
        if (dirent.isDirectory()) {
            svgRes.push(...findSvgFile(path.join(dir, dirent.name)))
        } else {
            const svg = readFileSync(path.join(dir, dirent.name))
                .toString()
                .replace(clearReturn, '')
                .replace(svgTitle, ($1, $2) => {
                    let width = 0
                    let height = 0
                    let content = $2.replace(
                        clearHeightWidth,
                        (s1, s2, s3) => {
                            s3 = s3.replace('px', '')
                            if (s2 === 'width') {
                                width = s3
                            } else if (s2 === 'height') {
                                height = s3
                            }
                            return ''
                        }
                    )
                    if (!hasViewBox.test($2)) {
                        content += `viewBox="0 0 ${width} ${height}"`
                    }
                    return `<symbol id="${idPreFix}-${dirent.name.replace(
                        '.svg',
                        ''
                    )}" ${content}>`
                })
                .replace('</svg>', '</symbol>')
            svgRes.push(svg)
        }
    }
    return svgRes
}

/**
 * @Date 2021/11/18
 * @Author Varus
 * @Description: 加载svg 文件
 *
 */
export default function (path, prefix = 'icon') {
    if (path === '') return
    const res = findSvgFile(path, prefix)
    // console.log(res)
    return {
        name: 'svg-transform',
        // vite 插件 直接替换 html 页签内容
        transformIndexHtml(html) {
            return html.replace(
                '<body>',
                `
          <body>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">
              ${res.join('')}
            </svg>
        `
            )
        }
    }
}

引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from './src/plugins/svg-loader'
const path = require('path')


function resolve (dir) {
  return path.join(__dirname, dir)
}
const setting = require('./src/setting.js')

export default defineConfig({
  resolve: {
    alias:{
      '@': path.resolve(__dirname, "src")
    },
  },
  server: {
    fs: {
      strict: false
    },
  },
  plugins: [vue(), svgLoader(resolve('src/icons/svg/'))]
})

引用以下以下问题ISSUE
相关的git ：https://github.com/JetBrains/svg-sprite-loader/issues/434

batman_yr
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 + Vite 中使用 vite-plugin-svg-icons 插件显示本地 SVG 图标
King Saj
08-21 607
这样配置后，你就可以在 Vue 3 项目中显示本地的 SVG 图标了。请根据具体情况将代码中的路径和图标 id 替换为实际使用的内容。
vue3+vite使用vite-svg-loader，加载svg
jquerybootstrap的博客
03-07 1019
【代码】vue3+vite使用vite-svg-loader，加载svg。
vite-svg-loader，在项目里轻松使用svg，ts项目需特别注意！
有事儿私信。
05-19 3040
vite-svg-loader插件可以让我们像使用vue组件那样使用svg图，使用起来超级方便。
vite-svg-loader:Vite 2.x插件可将SVG文件作为Vue组件加载
05-13
Vite SVG装载机 Vite 2.x插件可将SVG文件作为Vue组件加载。 < template> < MyIcon> </ template> < script setup > import MyIcon from ' ./my-icon.svg ' </ script > 安装 npm install vite-svg-loader --save-dev 设置 vite.config.js import svgLoader from 'vite-svg-loader' export default { plugins : [ vue ( ) , svgLoader ( ) ] } 与TypeScript一起使用 如果在Typescript项目中使用加载程序，则可能会收到类似Type 'string' is not assignable to type 'Compo
Vite项目当中的SVG图标的配置及图标全局组件的封装
最新发布
zrblue的博客
05-19 436
在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源，这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多。可以看到，在项目中可以使用 SVG 图标了，但是有一点不好的就是这样用起来有点麻烦，这个时候我们就可以进行ICON图标组件的封装了，并将其注册为一个全局的组件。use标签fill 属性性可以设置图标的颜色（如何设置失败，检查你复制的这个 svg 图标代码中是否有这个 fill 属性，如果有就将其移除掉，就可以使用了）为什么要使用 SVG 图标？
vite-plugin-svg-icons:Vite插件可快速创建SVG精灵
03-06
vite-plugin-svg-icons English | 用于生成svg精灵图。 特征 预加载项目运行时会生成所有图标，并且只需要操作一次dom。 高性能的内置缓存，只有在修改文件后才会重新生成。 安装（纱线或npm） 节点版本： > = 12.0.0 版本号： > = 2.0.0 yarn add vite-plugin-svg-icons -D 或者 npm i vite-plugin-svg-icons -D 用法 vite.config.ts中的配置插件 import viteSvgIcons from 'vite-plugin-svg-icons' ; import path from 'path' ; export default ( ) => { return { plugins : [ viteSvgIcons ( {
Vue3 + vite svg 组件
qq_44306441的博客
03-27 1691
Vue3 + vite 编写svg组件，本质上和vue2 + webpack 没有多大出入，唯一不同的是得编写一个vite插件 WbIcon.vue 这个文件和之前没多大改变，不一样之处是用了setup,可以按需更改，当然了不改也能食用。 <template> <svg :class="svgClass" aria-hidden="true" v-bind="$attrs"> <use :xlink:href="iconName" /> &
如何使用vite-svg-loader
02-23
Vite-SVG-Loader 是一个轻量级的插件，专门用于在 Vite 项目中引入 SVG 图像。使用这个插件，可以轻松地引入 SVG 图像，并且可以像使用 Vue 组件一样来使用它们。 下面是使用 Vite-SVG-Loader 的基本步骤： 1. ...
vite-plugin-svgr:Vite插件将SVG转换为React组件
05-10
vite-plugin-svgr Vite插件可将SVG转换为React组件。 在引擎盖下使用 。用法// vite.config.jsimport svgr from 'vite-plugin-svgr'export default { // ... plugins : [ svgr ( ) ] ,} 然后可以将SVG文件作为React...
vite-plugin-svg-icon:svg icon 转为组件
04-09
在 vite 配置加入插件 vite.config.ts import { defineConfig } from 'vite'; import { VueSvgIcon } from 'vite-plugin-svg-icon'; defineConfig({ plugins[VueSvgIcon()] // or plugins[VueSvgIcon({ // 生成...
在vue3中使用vite-svg-loader插件
Anyuegogogo的博客
10-03 896
vite-svg-loader插件可以让我们像使用vue组件那样使用svg图，使用起来超级方便。
vue-svg-loader-Webpack加载器，可让您将SVG文件用作Vue组件-Vue.js开发
05-27
vue-svg-loader webpack loader，可让您将SVG文件用作Vue组件文档-常见问题解答安装npm i -D vue-svg-loader vue-template-comp vue-svg-loader Webpack loader，可让您将SVG文件用作Vue组件文档-常见问题解答安装npm i -D vue-svg-loader vue-template-compiler yarn add --dev vue-svg-loader vue-template-compiler基本配置webpack module.exports = {module：{规则：[{测试： /\.svg$/，使用：['babel-loader'，'vue-svg-loader'，]，}，]，}，}; Vue CLI module.exports = {chainWebpack：（config）=> {缺点
在 React、Vue项目中使用SVG的方法
08-28
本篇文章主要介绍了在 React、Vue项目中使用SVG的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vite vue3 ts 全局封装自定义svg组件，全局引入
胡一可
10-25 700
8.因为项目使用svg组件频率很高，所以将svg组件注册成全局组件，新建service/globalComponent/index.ts。6.为了更好地复用，接下来将svg封装成一个全局组件，以后使用更加方便，新建component/svgicons/index.vue。4.使用vite-plugin-svg-icons插件还需要fast-glob依赖。1.安装vite-plugin-svg-icons插件。2.配置vite.config.ts文件，配置插件。7.使用svgicon组件。
SVG 文件的引入方式之一：以 URL 的方式引入 SVG 文件，vue2、vue3+Vite vite-svg-loader
01-03 5742
vue2 使用 require() 引入 svg 使用vue3 + ts + vite 使用 vite-svg-loader 插件引入svg 使用并最终实现代码提示一样使用图标文件。
基于 vite-plugin-svg-icons 的 svg 图标组件方案
m0_71835253的博客
07-16 289
学完之后, 引入svg图标就这么简单, 快点学起来!!!把 icons 文件夹中的图标打包成 svg 雪碧图，。
推荐一款Vite中加载svg的小工具
胖蔡叨叨叨
02-21 512
最近开发中使用到一个好玩的Vite三方小插件很实用，可以辅助我们开发过程中快速加载svg小图标。其原理是在Vite编译器的时候通过一次性的DOM操作将SVG插入DOM结构中，然后通过使用内联SVG进行加载访问，极大的方便了我们的小图标引用模式。若只是少量的svg图片加载建议食用，若是svg图片数量过多并不建议采用（过多的svg文件插入也会导致我们的html文件过大）。
vite构建的vue3项目中如何使用svg图标？
deng_zhihao692817的专栏
07-21 314
2、配置插件： 在 vite.config.ts中配置 createSvgIconsPlugin。存放文件路径 ：src/assets/svg。3、封装成组件：SvgIcon.vue。
vue-cli3使用vue-svg-loader加载svg
weixin_34383618的博客
06-13 1941
vue-svg-loader Documentation - FAQ webpack loader that lets you use SVG files as Vue components Microsoft Edge 报错问题 在 Microsoft Edge 存在ES6spread & rest语法无法转译的问题 Error: Expected identifier, str...
vite vue svg
08-22
在使用vite构建Vue项目时，你可以通过安装vite-svg-loader插件，并在vite.config.js中进行相关配置来处理SVG图标文件。你需要指定需要缓存的SVG图标文件夹，并设置symbolId格式，这个格式与在引入SVG组件时的name...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值