使用vue组件加载SVG图片步骤

更新日期: 2020-05-12阅读: 3.8k标签: svg

使用vue加载SVG图片,有两种方法,一种是雪花loader,一种是vue-svg-loader(官网推荐)。在自己的项目中,本次使用vue-svg-loader加载svg图片,并且对图片进行属性修改。操作步骤:


1:下载svg-vue-loader  ,并安装

npm i -D vue-svg-loader  vue-template-compiler

下载babel-loader,并安装

npm install -D babel-loader @babel/core @babel/preset-env webpack


2:本人使用vuecli3脚手架,在vue.config.js配置如下

module.exports = {
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');

svgRule.uses.clear();

svgRule
.use('babel-loader')
.loader('babel-loader')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader');
},
};


3. 在babel.config.js文件中修改为:
module.exports = {
  presets: [
    '@vue/app'
  ],
  sourceType:'unambiguous'
}

 

  4,这样就可以加载svg图片了

<template>
  <nav>
    <a href="https://github.com/vuejs/vue">
      <VueLogo />
      Vue
    </a>
    <a href="https://github.com/svg/svgo">
      <SVGOLogo />
      SVGO
    </a>
    <a href="https://github.com/webpack/webpack">
      <WebpackLogo />
      webpack
    </a>
  </nav>
</template>
<script>
import VueLogo from './public/vue.svg';
import SVGOLogo from './public/svgo.svg';
import WebpackLogo from './public/webpack.svg';
 
export default {
  name: 'Example',
  components: {
    VueLogo,
    SVGOLogo,
    WebpackLogo,
  },
};
</script>

注意,如果在配置vue.config.js中的vue-svg-loader时,不去配置babel,只兼容谷歌和火狐,而IE,Edge不兼容,会报错,原因是IE,Edge使用ES5语法,ES6语法浏览器不认识,所以必须使用Babel进行转码,将ES6语法翻译成ES5,这样就可以兼容了


链接: https://www.fly63.com/article/detial/9004

如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验

设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验,对于那些对产品有着像素级完美追求的人这种体验差异尤其显著! SVG(可缩放的矢量图形)完美地解决了上文中提到的部分问题。

如何在vue项目中优雅地使用SVG

安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,在static下新建svg文件夹,用来放置当做icon使用的svg,使用include,include和img做区分。然后修改webpack.base.conf.js配置,这样svg-sprite-loader只会处理我们指定的static/svg下的文件

封装全局icon组件 svg (仿造element-ui源码)

引入 svg-sprite-loader 插件,vue-cli项目默认情况下会使用 url-loader 对svg进行处理,会将它放在/img 目录下,所以这时候我们引入svg-sprite-loader 会引发一些冲突。使用 webpack 的 exclude和 include

通过css改变svg img的颜色

一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?但是为了更小的开销,一般css为更好的解决方案

一步步教你用 CSS 为 SVG 添加过滤器

SVG就存在了,但仍有一些有趣的方法去用它。在本教程中,重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像,我将向你展示如何将它们应用于任何常规页面的内容上。实际上我们是通过告诉 CSS 过滤器所拥有的 ID,然后再把过滤器应用于 SVG 的方式来实现。

SVG基础图形和D3.js

学习如何使用D3.js来创建这些图形?这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性。使用D3.js画一个SVG 的 圆 circle,可以使用如下代码创建:

关于Data URLs svg图片显示出错和浏览器URL hash #

在使用生成的svg图作为<img>标签是src值时,发现有部分浏览器显示异常,所以这里记录下,在<img src=\\\"Data URLs\\\">中,Data URLs格式与显示情况如下:

巧妙运用clip-path,实现CSS形状变换

CSS3的clip-path,这个clip-path看起来有点眼熟,因为它原本就存在于SVG里头,利用掩码(剪裁)的方法,连接坐标绘制掩码区域,就可以做出许多不同的形状,让底色或底图显现,随着浏览器对于CSS3的支持度大幅提升

使用SVG symbols建立图标系统完整指南

从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。

svg插入foreignObject无法响应事件

svg中可以通过foreignObject嵌入html,展示更丰富的样式。当需要给这中间的html绑定事件的时候,不管是使用委托和直接查询元素进行绑定的时候都无法生效。右键检查元素也检查不到具体的元素

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!