直接引入编辑器会报错


Google: typescript svg cannot find module找到 这个网址





我放到了 shims-vue.d.ts 里面

declare module "*.svg" {
const content: any;
export default content;
}

用的时候需要用到svg use 的使用方法所以需要一个loader 所以会用到svg sprite loader
google搜索svg sprite loader 这个网址

  • 打开控制台:安装yarn add svg-sprite-loader -D
  • 做些配置:你得把搜索到的webpack.config.js的内容改成vue.config.js认识的内容。

vue.config.js

const path = import('path')

module.exports = {
lintOnSave: false,
chainWebpack: config => {
const dir = path.resolve(__dirname, 'src/assets/icons') //我们的icons全处于这个目录 //config就是vue把webpack的API封装了,然后暴露给我们的一个对象 config.module
.rule('svg-sprite') //添加一个规则
.test(/\.svg$/ //文件如果匹配上了这个正则表达式(整个目录下的.svg结尾的文件)就用这个规则
.include.add(dir).end() // 只包含 icons 目录就结束,其他目录一概不走这个规则(也就是icons目录的.svg文件)
.use('svg-sprite-loader').loader('svg-sprite-loader').options({extract: false}).end(), //使用哪些loader
//有个坑!打开一个svg文件,其实是个xml文件,用soft wrap自动换行看得更清楚。在<path>标签里添加fill=某种color,那这个icon svg 就会变色!相当于这个svg默认就带颜色了,会覆盖我们自己给他的颜色!那我们不想要我们的svg自带颜色(因为我们改不了),我们也不可能一个个svg都去删掉他们的fill,万一有一百个svg呢!
.use('svgo-loader').loader('svgo-loader') //可以使用一个svgo-loader,记得安装(yarn add --dev svgo-loader)!
.tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end() //添加了一个选项,删除fill属性 //配置插件
config.plugin('svg-sprite').use(import('svg-sprite-loader/plugin'), [{plainSprite: true}]),
//其他的svg loader要排除我们现在这个目录,不然dir又走了上面这个又走了其他的
config.module.rule('svg').exclude.add(dir) , // 其他 svg loader 排除 icons 目录

svg sprite loader的作用:他把我们导入的svg文件们变成symbol标签们(会有个id),把symbol标签外面包一个svg标签,把svg标签放入body里。接下来我们就可以用svg标签包着use标签(用xlink:href指向那个id)就可以使用那个svg了。

SVG的引入历程的更多相关文章

  1. HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  2. canvas绘图、WebGL、SVG

    目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...

  3. HTML5 学习笔记(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  4. HTML学习总结(四)【canvas绘图、WebGL、SVG】

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  5. svg从入门到装逼(一)

    svg文件是基于xml的矢量图,而canvas是基于html和js的位图.关于两者的比较,在粗就不赘述了. 1.  首先来上一个svg的基本结构: <?xml version="1.0 ...

  6. SVG笔记

    SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C("World Wide Web C ...

  7. toolTip(用svg制作出富有动态的对话框)

    昨晚看了用svg如何制作富有动态的tooltip,于是今天就心血来潮学着做一下,于是也成功做出来,也明白其中的原理,收获颇多阿!接下来要多去学习svg,这是个好东西. 这其中也注意了一些平时纠结的细节 ...

  8. 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...

  9. 【转】JavaScript操作SVG的一些知识

    原文:http://blog.iderzheng.com/something-about-svg-with-javascript/ 前阵子学习了一下SVG(Scalable Vector Graphi ...

随机推荐

  1. SpringCloud系列使用Eureka进行服务治理

    1. 什么是微服务? "微服务"一词来自国外的一篇博文,网站:https://martinfowler.com/articles/microservices.html 如果您不能看 ...

  2. 性能测试必备知识(7)- 深入理解“CPU 使用率”

    做性能测试的必备知识系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1806772.html 回顾 CPU 使用率是单位时间内 CPU 使 ...

  3. PHP password_hash() 函数

    password_hash() 函数用于创建密码的散列(hash) PHP 版本要求: PHP 5 >= 5.5.0, PHP 7高佣联盟 www.cgewang.com 语法 string p ...

  4. PHP strncmp() 函数

    实例 比较两个字符串(区分大小写): <?php高佣联盟 www.cgewang.comecho strncmp("Hello world!","Hello ear ...

  5. P5468 [NOI2019]回家路线 斜率优化 dp

    LINK:回家路线 (文化课 oi 双爆炸 对 没学上的就是我.(我错了不该这么丧的. 不过还能苟住一段时间.当然是去打NOI了 这道题去年同步赛的时候做过.不过这里再次提醒自己要认真仔细的看题目 不 ...

  6. Angular 10材质的模态弹出示例和教程

    在本教程中,我们将通过示例使用Angular 10材质构建模式弹出窗口. 在这里,我们将研究创建Angular 10项目,安装和设置Angular 10材质,以及创建自定义材质模块文件. 在本教程中, ...

  7. 授人以渔:stm32资料查询技巧

    摘要:本章以stm32f103作为案例向大家讲解arm公司和st公司的关系以及我们在对stm32开发时需要如何正确的查找手册. ARM公司和ST公司的关系 这里要从一块芯片的生产说起,比如我们要生成一 ...

  8. 嵌入式linux简介

    嵌入式linux系统应用非常广泛,涵盖各行各业,基于ARM.mips等微处理器架构的硬件平台.基于嵌入式linux系统的设备已经深入生活中各个角落,随处可见.   我们常说的嵌入式linux系统,其实 ...

  9. “随手记”开发记录day08

    今天完成了关于统计页面中的关于每月支出和每月收入的页面

  10. NIO(三):Selector选择器

    一.堵塞式与非堵塞式 在传统IO中,将数据由当前线程从客户端传入服务端,由服务端的内核进行判断传过来的数据是否合法,内核中是否存在数据. 如果不存在数据 ,并且数据并不合法,当前线程将会堵塞等待.当前 ...