在src文件夹里面的main.js文件加入如下代码: import SvgIcon from "./components/svgIcon/Index.vue"const app=createApp(App) app .component("svg-icon", SvgIcon) .mount("#app"); 5.配置svg-sprite-loader插件 在vue.config.js文件的chainWebpack对象进行如下配置和解析 5.1.当vue/cli的版本号为 5.0的...
在Vue 3项目中使用svg-sprite-loader可以方便地管理和使用SVG图标。以下是详细的步骤: 1. 安装svg-sprite-loader及其依赖 首先,你需要在项目中安装svg-sprite-loader和相关的依赖。打开终端,运行以下命令: bash npm install svg-sprite-loader svg-sprite-loader-plugin --save-dev 或者,如果你使用yarn作为包管理...
今天来学习一下使用 svg-sprite-loader 在 Vue3 项目中实现图标按需加载 1、将 email.svg 文件导入项目 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 4H20C21.1 4 22 ...
将图标放在特定文件夹下,这里以 @/assets/svg 中导入的 svg 为例 2、安装 svg-sprite-loader npmisvg-sprite-loader 3、配置 vue.config.js module.exports= {// 配置使用stylus全局变量chainWebpack: config => {constsvgRule=config.module.rule("svg"); svgRule.uses.clear(); svgRule .use("svg-spr...
svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html,接下来就可以在模版中方便地使用 svg-sprite 技术了。 使用svg-sprite 的好处 页面代码清爽 可使用 ID 随处重复调用 每个SVG 图标都可以更改大小颜色 安装插件 npm install svg-sprite-loader--save-dev ...
1.安装svg-sprite-loader,这里使用的是6.0.11版本 npm install svg-sprite-loader 2.项目的svg图片存放在src/icons/svg下,我们在这里创建两个文件svgIcon.ts和svgIcon.vue(在哪创建和文件名字并没有任何要求) 3.在svgIcon.ts中加入下列代码(如果报错找不到fs模块请跳转到文章末尾 附录-导入@type/node) ...
iconfont symbol对比svg-sprite-loader iconfont symbol在SVG使用上简单,但是对于后期修改不方便。这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关目前symbol方式的iconfont: 支持多色图标了,不再受单色限制。 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。 兼容性较差,支持...
vue.config.js 文件代码如下: module.exports = { devServer: { port: 8106, }, chainWebpack: (config) => { config.module.rules.delete("svg"); config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('svg-sprite') .use('svgo-loader') .loader('...
我的 vue 项目一般都使用动态导入的 svg-sprite,意思是:既要是个雪碧图,用 <use> 标签复用;而且页面的 svg 应该是动态按需加载的。我觉得这样性能比较好,在 vue2 中实现比较简单,但是 vue3+vite 下我并未找到合适的解决方案,只有雪碧图没有动态导入。于是乎我就想自己做一个。
liuhongdi@lhdpc:/data/vue/svgdemo$ npminstallsvg-sprite-loader --save-dev added47packagesin11s14packages are lookingforfunding run `npm fund`fordetails 说明:刘宏缔的架构森林是一个专注架构的博客, 网站:https://blog.imgtouch.com 本文:https://blog.imgtouch.com/index.php/2023/05/28/vue-js3...