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

时间: 2020-05-12阅读: 1647标签: 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,这样就可以兼容了


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

使用svg描边来实现移动端1px

今天介绍一个通过svg来实现移动端1px效果的小技巧,通常我们在使用一些设计软件时,描边会有三种选择,分别是内描边、居中描边和外描边,比如 photoshop

svg高级应用及动画

canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求。但 canvas 和 webGL 毕竟是偏向底层的绘制引擎,某些场景使用起来还是过于繁琐的,不分场合一律使用锤子解决的行为不值得提倡

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

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

如何在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下的文件

svg的path的应用

我们这里只要用到M L A 和Z命令就可以了,M L 和Z命令比较简单,这里详细讲解A命令,A命令是画弧的命令,里面的A命令有 7个参数:rx ry x-axis-rotation large-arc-flag sweep-flag x y

10个开源SVG图标库

在国内,我想大家基本上都是用阿里的iconfont图标库,这里介绍10个其他的开源图标库,下面列出的所有库都是完全开源的,因为我已经检查了许可条款和条件。

SVG基础图形和D3.js

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

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

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

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

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

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

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

点击更多...

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