SVGR 开源项目教程

SVGR 开源项目教程

svgrTransform SVGs into React components 🦁项目地址:https://gitcode.com/gh_mirrors/sv/svgr

1. 项目的目录结构及介绍

SVGR 项目的目录结构如下：

/svgr
├── bin
├── cli
├── core
├── jest
├── metro
├── plugin-jsx
├── plugin-svgo
├── scripts
├── website
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .prettierrc
├── .travis.yml
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package.json
└── tsconfig.json

目录介绍

• bin: 包含可执行文件。
• cli: 包含命令行接口的代码。
• core: 包含核心功能的代码。
• jest: 包含 Jest 测试配置。
• metro: 包含 Metro 配置。
• plugin-jsx: 包含 JSX 插件的代码。
• plugin-svgo: 包含 SVGO 插件的代码。
• scripts: 包含各种脚本文件。
• website: 包含项目网站的代码。

配置文件介绍

• .babelrc: Babel 配置文件。
• .editorconfig: 编辑器配置文件。
• .eslintignore: ESLint 忽略文件。
• .eslintrc: ESLint 配置文件。
• .gitignore: Git 忽略文件。
• .prettierrc: Prettier 配置文件。
• .travis.yml: Travis CI 配置文件。
• CODE_OF_CONDUCT.md: 行为准则。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 许可证文件。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

SVGR 项目的启动文件主要是 cli 目录下的 index.js 文件。这个文件是命令行接口的入口点，负责解析命令行参数并调用相应的功能模块。

// cli/index.js
const meow = require('meow');
const { run } = require('@svgr/core');
const { transform } = require('@svgr/core');

const cli = meow(`
  Usage
    $ svgr [input] [options]

  Options
    --out-dir, -d  Output directory
    --icon         Icon mode
    --replace-attr-values  Replace attribute values
    ...
`, {
  flags: {
    outDir: {
      type: 'string',
      alias: 'd'
    },
    icon: {
      type: 'boolean'
    },
    replaceAttrValues: {
      type: 'string'
    }
    // 其他选项
  }
});

// 解析命令行参数并执行相应操作
run(cli.input, cli.flags);

3. 项目的配置文件介绍

SVGR 项目的配置文件主要包括以下几个：

.babelrc

Babel 配置文件，用于配置 Babel 转译器。

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

.eslintrc

ESLint 配置文件，用于配置代码检查规则。

{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
    "no-console": "off"
  }
}

package.json

项目依赖和脚本配置文件。

{
  "name": "svgr",
  "version": "8.1.0",
  "description": "Transform SVGs into React components",
  "main": "lib/index.js",
  "bin": {
    "svgr": "bin/svgr"
  },
  "scripts": {
    "start": "node cli/index.js",
    "build

svgrTransform SVGs into React components 🦁项目地址:https://gitcode.com/gh_mirrors/sv/svgr