vue-cli3中使用svg

最新推荐文章于 2024-06-07 16:03:20 发布
最新推荐文章于 2024-06-07 16:03:20 发布
阅读量346 收藏
点赞数
文章标签： vue svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37915717/article/details/115316788
版权
本文介绍了在Vue CLI3项目中如何使用svg，包括通过vue ui安装vue-cli-plugin-svg-sprite，自动安装svgo和svgo-loader，配置vue.config.js，创建公共SVG组件，并提醒在设置SVG颜色时需移除fill属性以实现自定义颜色。
摘要由CSDN通过智能技术生成

vue-cli3中使用svg

打开vue ui 安装 vue-cli-plugin-svg-sprite

然后会自动安装 svgo svgo-loader vue-cli-plugin-svg-sprite

然后再vue.config.js 配置

  //svg配置
  chainWebpack: config => {
    config.module
      .rule('svg-sprite')
      .use('svgo-loader')
      .loader('svgo-loader')
  },
  pluginOptions: {
    svgSprite: {
      dir: 'src/assets/icons', //就是放svg资源的路径
      test: /\.(svg)(\?.*)?$/,
      loaderOptions: {
        extract: true,
        spriteFilename: 'static/img/icons.[hash:8].svg' //打包后的svg路径
      },
      pluginOptions: {
        plainSprite: true
      }
    }
  }

然后在 components 目录下创建公共svg组件

<template>
 <svg :class="className" xmlns="http://www.w3.org/2000/svg">
   <title v-if=
最低0.47元/天 解锁文章
qq_37915717
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在vue-cli3项目中使用svg-sprite-loader
草灯的专栏
09-11 1402
目录概览使用svg-sprite-loader好处手把手图文教程：如何引入svg-sprite-loader上iconfont上搜索需要的icon图标，下载svg格式文件，放入到src>icons>svg目录下在main.js页面里面引入icons在页面中使用svg-sprite-loader图标。最终演示效果如下：参考文章icons和SvgIcon目录下载 使用svg-sprite-loader好处 我用vue-cli3.0 + elementUI 搭建项目，但是elementUI的icon组
vue-cli3中使用svg-sprite-loader方法
是一座岛
08-21 3223
一. 引用步骤 npm install svg-sprite-loader -D 或 yarn add svg-sprite-loader -D 在src目录下新建svg文件夹，这里存放所有svg文件。 在vue.config.js文件中配置加载svg文件对应svg-sprite-loader规则 const path = require('path') function resolve(...
vue3 + vite 中使用 svg-icon 的图标
最新发布
文木博客
06-07 522
在 vue 中 使用 svg icon 的不同的方式
vue cli3配置使用svg （记录踩过的坑）
weixin_45295262的博客
12-18 2181
SVG简单理解svg简单理解svg 图标组成元素svg 和 直接引入图标(iconfont下载图标引入方式)的优缺点vue cli3 项目使用svg步骤（想直接学会用的点这里）总结简单理解svg简单理解svg图标优缺点比较vue cli3 项目使用svg步骤总结 简单理解svg 简单理解svg 图标组成元素 svg 和 直接引入图标(iconfont下载图标引入方式)的优缺点 vue cli3 项目使用svg步骤（想直接学会用的点这里） 总结 简单理解svg SVG 指可伸缩矢量图形 (Scalable V
vue cli3配置svg图标
qq_42939877的博客
01-15 761
https://blog.csdn.net/weixin_42204698/article/details/93751906
vue-cli3使用svg图标的详细步骤
qq_43248623的博客
04-08 1374
1.安装依赖 npm install svg-sprite-loader -D 2.在vue.config.js里添加配置 module.exports={ chainWebpack: config => { const svgRule = config.module.rule("svg"); svgRule.uses.clear(); svgRule .use("svg-sprite-
VUE-cli3使用 svg-sprite-loader
10-17
svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，这篇文章主要介绍了VUE-cli3使用 svg-sprite-loader,需要的朋友可以参考下
vue-cli-plugin-svg-sprite:vue-cli 3插件来构建SVG Sprite
04-29
vue-cli-plugin-svg-sprite vue-cli 3插件，可使用构建SVG Sprite。 安装 vue add svg-sprite 用法 使用生成器提供的，或查看以了解其他/高级用法。 注意：此插件仅将加载程序添加到Webpack配置中，不会使您的目录...
vue-cli3中配置alias和打包加hash值操作
10-14
在 Vue CLI 3 的示例中，对于图片、音频、视频和字体文件的配置，我们使用了 `hash` 来确保当这些静态资源改变时，它们的 URL 也会随之更新： ```javascript { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: '...
vue-cli3使用svg问题的简单解决办法
weixin_34295316的博客
01-13 1857
此解决办法使用的是 vue-cli 插件 vue-cli-plugin-svg-sprite 效果如下： 那个朋友圈图标就是我从网上找的svg图片 使用方式如下： vue add svg-sprite vue.config.js添加配置，在文件内最下方找到pluginOptions module.exports = { plug...
vue-cli使用svg
weixin_41445581的博客
09-24 173
1.在对应的vue项目安装插件 vue add svg-sprite 2.安装 svgo-loader npm install svgo svgo-loader --save-dev 3在main.js里面注册SvgIcon组件 //引入svg组件 import SvgIcon from '@/components/SvgIcon.vue' //全局注册icon-svg Vue.co...
svgo-loader:用于webpack的svgo加载程序
05-12
用于加载程序 安装 $ npm install svgo-loader --save-dev ...或使用纱线 $ yarn add svgo-loader -D 用法 module . exports = { ... , module : { rules : [ { test : / \. svg $ / , use : [ { loader : 'file-loader' } , { loader : 'svgo-loader' , } ] } ] } } 默认情况下，svgo装载机用途从配置svgo.config.js类似svgo CLI。 查看 。
在vue中使用svg sprite
weixin_30785593的博客
02-13 391
概述 这几天研究了一下在vue中使用svg sprite，有些心得，记录下来，供以后开发时参考，相信对其它人也有用。 在vue中导入svg 在vue中导入svg的方法有很多种，比如在img标签的src属性中导入，但是这样就不能使用class改变svg的颜色。所以一般利用svg的use标签使用内联svg的方法导入。例如下面： <svg> <use xlink:href="@/a...
vue-cli svg-sprite-loader
qq_40822000的博客
11-22 921
在vue-cli中使用svg-sprite-loader 新手上路，有什么不对的地方请不吝赐教 svg-sprite-loader是干啥的？ 当你有很多的svg图片的时候，你可以使用svg-sprite-loader来把图片打包成雪碧图（不是心飞扬哪个雪碧），然后使用时每个svg对应一个name标识。 svg-sprite-loader安装 npm install svg-sprite-loade...
解决Vue cli 4.0 自动导入svg的问题
tp27933的博客
07-15 306
問題 : 剛開始學著用vue cli時最常遇到一個問題是，想要修改某個標籤樣式時，老是失效，但是在別的頁面上此標籤正常運作。 如果刪掉scope局部作用時，樣式才正常渲染，但是全局樣式同樣帶來很多問題。 原因分析 : 當時使用的是element ui組件，而在vue cli，此插件在scope作用域因为权重的问题一律被視為子組件。 在vue裡，父组件中是不能直接修改子组件的样式的。 解決方法 : 需要在父组件中使用vue的深度作用选择器 /deep/ <style lang="scss" scoped
使用 svg-sprite-loader、svgo-loader 优化 svg symbols
热门推荐
Mark
04-08 1万+
最近重新学习了一遍 React 基础，新起了个小 Demo 实践一下，项目中用到的静态资源也比较少，图标当时使用的是svg symbols 的方式引入（字体图标三种格式区别），但是在开发的过程中遇到几个问题： ① 下载的 svg 可能有自带的 fill 属性，添加 color 样式不生效。 ② 封装 Icon 组件时，每用到一个 svg 图标都需要引入一下，显得有点不太聪明。 为解决上述两个问题，上网找了一下解决方案，在这里总结一下，每天成长一点点。
vue中使用webpack添加svg以及去除fill
qq_36579455的博客
11-03 3264
前言 vue项目中使用iconfont图标库的时候，如果是直接将iconfont对应的文件下载，然后导入到项目当中，其实对于后续代码的维护以及更新图标是一个比较麻烦的事情，但是如果我们引入图标只需要下载对应的svg就很方便了，所以为了快速的使用图标，我们需要使用webpack中的loader来对svg图片进行配置。 如有不当，敬请告知！ 前提条件：vue2.x版本，webpack3.x版本（so低版本真的恶心） 一、vue项目中引入全局组件SvgIcon 网上一搜一大堆，下面是我之前高版本项目中使用的
Vue学习-1（18）svgo-loader删除svg自带fill
hell_csdn的博客
01-01 1930
svg fill里有预设颜色，active不能生效 自动删fill颜色 加个loader svgo-loader yarn add --dev svgo-loader svg-sprite-loader-mod
vite创建项目，cra创建项目，vue-cli创建项目
weixin_43847807的博客
11-25 751
各脚手架区别

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值