SVG作为图片使用

在网站找到图标，下载svg图片，得到如 money.svg
得到的图片拷贝在工程目录里
在想要使用图片的位置导入图片import money from "icons/money.svg"
在目标位置使用图片

import money from "icons/money.svg"
……
<li>
    <img src={money} alt=""/>
    <Link to="/tags">标签页</Link>
</li>

SVG图片的另一种使用方法：SVG Symbols

需要一个loader: svg-sprite-loader，链接 github.com/JetBrains/s…
为了加上svg-sprite-loader，必须让react的config文件可编辑，执行 yarn eject

eject弹出react配置文件的操作时不可逆的

先提交代码，然后执行yarn eject后生成了非常多的文件，其中值得注意的，webpack.config.js，是我们要修改的，还有script目录，一般不修改
再提交代码，eject的修改
安装svg-sprite-loader，yarn add --dev svg-sprite-loader,一般来说，webpack相关的东西,typescript的东西都要加--dev
按照指导文档复制，复制到webpack.config.js的module/rules/oneOf中

{
  test: /.svg$/,
  use: [
    { loader: 'svg-sprite-loader', options: { ... } },
    'svg-transform-loader',
    'svgo-loader'
  ]
}

然后把options后的三个省略号删除 7. 其中还有svgo-loader，用的挺多，svg优化配置

SVG Symbols的使用

svg图片当做变量引用并打印

import money from "icons/money.svg"
console.log(money);

报错

Module not found: Error: Can't resolve 'svg-sprite-loader' in 'D:\Desktop\html\.Project\come-up-account'
ERROR in ./src/components/Nav.tsx 6:0-36
Module not found: Error: Can't resolve 'svg-sprite-loader' in 'D:\Desktop\html\.Project\come-up-account'

可能是svg-sprite-loader安装失败？
重新执行安装命令yarn add --dev svg-sprite-loader，在运行yarn start,成功！
运行结果，导入的svg变量是BrowserSpriteSymbol类型

import money from "icons/money.svg"
console.log("ddsw", money); //打印结果，BrowserSpriteSymbol 类型

引用svg标签

import icons from "icons/money.svg"
console.log("ddsw", icons); // import导入svg图片的话，这个是必须的，否则就会因为TreeShaking而找不到引入的icons
……
<li>
	<svg fill="red" className={"icon"}>
		{/*其中money是id，就等于文件名*/}
		<use xlinkHref="#money"/>
	</svg>
	<Link to="/tags">标签页</Link>
</li>

或者

require("icons/money.svg");
……
<li>
	<svg fill="red" className={"icon"}>
		{/*其中money是id，就等于文件名*/}
		<use xlinkHref="#money"/>
	</svg>
	<Link to="/tags">标签页</Link>
</li>

其他

.icon{
  height: 1em; // em代表一个字符
  width: 1em; // em代表一个字符
}

TreeShaking，如果没有用到一个东西，就从依赖树上拿下来

从0开发React项目-9-SVG使用

SVG作为图片使用

SVG图片的另一种使用方法：SVG Symbols

SVG Symbols的使用

其他