React-SVG 项目使用教程
1. 项目的目录结构及介绍
React-SVG 项目的目录结构如下:
react-svg/
├── examples/
│ ├── basic/
│ ├── dynamic-props/
│ ├── fallback/
│ ├── inject-style/
│ ├── loader/
│ ├── proxy/
│ ├── redraw-on-resize/
│ ├── render-props/
│ ├── root-props/
│ ├── title-props/
│ └── wrapper-props/
├── src/
│ ├── index.tsx
│ ├── react-svg.tsx
│ ├── types.ts
│ └── utils/
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmignore
├── .prettierrc
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── package.json
├── README.md
├── tsconfig.json
└── webpack.config.js
目录结构介绍
examples/
: 包含多个示例项目,展示了 React-SVG 的不同使用场景。src/
: 项目的源代码目录,包含主要的组件和工具函数。index.tsx
: 项目的入口文件。react-svg.tsx
: 主要的 React-SVG 组件。types.ts
: 类型定义文件。utils/
: 工具函数目录。
.babelrc
,.editorconfig
,.eslintrc
,.gitignore
,.npmignore
,.prettierrc
: 项目配置文件。CHANGELOG.md
,CODE_OF_CONDUCT.md
,CONTRIBUTING.md
,LICENSE
,README.md
: 项目文档和规范文件。package.json
: 项目的依赖和脚本配置文件。tsconfig.json
: TypeScript 配置文件。webpack.config.js
: Webpack 配置文件。
2. 项目的启动文件介绍
项目的启动文件是 src/index.tsx
,它是整个项目的入口点。该文件主要负责导出 React-SVG 组件,使其可以在其他项目中使用。
import React from 'react'
import ReactDOM from 'react-dom'
import ReactSVG from './react-svg'
export default ReactSVG
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的依赖、脚本和其他元数据。以下是一些重要的部分:
{
"name": "react-svg",
"version": "11.1.6",
"description": "A React component that injects SVG into the DOM.",
"main": "dist/react-svg.js",
"scripts": {
"build": "npm run clean && npm run build:cjs && npm run build:es && npm run build:umd",
"clean": "rimraf dist",
"lint": "eslint src",
"test": "jest"
},
"dependencies": {
"@tanem/svg-injector": "^8.0.62",
"prop-types": "^15.7.2"
},
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.1",
"@babel/preset-typescript": "^7.12.1",
"eslint": "^7.12.1",
"jest": "^26.6.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"typescript": "^4.0.3"
}
}
tsconfig.json
tsconfig.json
文件是 TypeScript 的配置文件,定义了 TypeScript 编译器的选项。
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "es2015"],
"jsx": "react",
"module": "commonjs",
"moduleResolution": "node",
"out