关于SVG
- SVG可被非常多的工具读取和修改(比如vscode)
- 不失真, 放大缩小图像都很清晰
- SVG文件是纯粹的XML, 也是一种DOM结构
- 使用方便, 设计软件可以直接导出
使用场景
首先说一下我的使用场景:这是一个和使用 webpack 工具管理的React项目,现在我已经下载了几个 .svg 文件到本地,准备直接在React项目中导入并使用这些SVG文件。
如果你的项目不是React或者不是使用webpack管理,那么这篇博客可能不能确切解决你的问题,但是你可以参考我的思路。
使用方法
1. 配置处理SVG的规则
如果你没有对webpack做过相关配置,那么是不能在React组件中使用本地SVG文件的,如果你直接引入SVG文件,那么在编译的时候,可能会遇到以下错误:
注意到红框中的错误提示:我们需要一个还是的 loader 来处理SVG文件,这里介绍一个非常好用的loader:file-loader
首先执行以下命令,安装该loader:
npm install file-loader --save-dev
安装完成之后,到 webpack.config.js 文件中添加一条处理规则,代码如下:
module.exports = {
// 其他的配置规则也省略
module:{
rules:[
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: "file-loader?name=assets/[name].[ext]"
}
]
}
};
2. 在React组件中使用SVG
处理规则配置完成之后,现在就可以直接在React组件中使用SVG文件了,使用方式和图片非常类似,以下给出实例代码:
import React from 'react'
// 引入SVG文件
const logoSvg = require("images/logo.svg")
class Login extends React.Component {
render() {
return (
<div className="login-page">
{/* 把SVG当作普通图片使用 */}
<img src={logoSvg}></img>
</div>
);
}
}
export default Login;
网友评论