在Remix项目中使用SVGR转换SVG为React组件

在Remix项目中使用SVGR转换SVG为React组件

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

SVGR是一个强大的工具，它可以将SVG文件转换为React组件。本文将详细介绍如何在Remix框架项目中配置SVGR，实现SVG文件的自动化转换和使用。

为什么要在Remix中使用SVGR

在React项目中直接使用SVG文件通常有以下几种方式：

1. 作为img标签的src引入
2. 直接内联SVG代码
3. 转换为React组件

SVGR提供的第三种方式具有明显优势：

• 组件化：SVG可以作为常规React组件使用
• 可定制：可以动态修改SVG属性如颜色、大小等
• 性能优化：SVGR可以配合SVGO优化SVG代码
• 类型安全：支持TypeScript类型定义

安装必要依赖

首先需要安装SVGR及相关插件：

npm install --save-dev @svgr/cli @svgr/plugin-svgo @svgr/plugin-jsx @svgr/plugin-prettier npm-watch npm-run-all

各包的作用说明：

• @svgr/cli: SVGR命令行工具
• @svgr/plugin-svgo: 使用SVGO优化SVG代码
• @svgr/plugin-jsx: 将SVG转换为JSX
• @svgr/plugin-prettier: 格式化生成的代码
• npm-watch: 文件变化监听
• npm-run-all: 并行运行多个npm脚本

配置项目脚本

在package.json中添加以下脚本配置：

{
  "scripts": {
    "icons": "npx @svgr/cli --out-dir app/components/icons -- app/icons",
    "icons:watch": "npm-watch icons",
    "dev:svg": "run-s icons icons:watch",
    "dev:remix": "remix dev",
    "dev": "run-p dev:*"
  },
  "watch": {
    "icons": {
      "patterns": ["icons"],
      "extensions": "svg",
      "quiet": false
    }
  }
}

配置说明：

• icons: 将app/icons目录下的SVG文件转换为React组件，输出到app/components/icons
• icons:watch: 监听SVG文件变化并自动转换
• dev:svg: 首次转换并启动监听
• dev: 并行运行所有开发相关任务

SVGR配置文件

创建svgr.config.js配置转换选项：

module.exports = {
  plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx', '@svgr/plugin-prettier'],
  typescript: true, // 生成TypeScript组件
}

SVGO优化配置

创建svgo.config.js配置SVG优化选项：

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false, // 保留viewBox属性
        },
      },
    },
  ],
}

在代码中使用SVG组件

转换后的SVG可以作为常规React组件使用：

import Star from '~/components/icons/star'

function App() {
  return (
    <div>
      <Star width={24} height={24} fill="currentColor" />
    </div>
  )
}

开发工作流

运行开发命令：

npm run dev

这个命令会：

1. 启动SVG文件转换和监听
2. 启动Remix开发服务器

当修改或添加SVG文件时，会自动重新生成对应的React组件。

高级配置建议

1. 自定义组件模板：可以创建自定义模板来统一生成的组件样式
2. 按需导入：配置babel插件实现按需加载
3. 样式定制：通过SVGR配置添加CSS模块或styled-components支持
4. 测试集成：为生成的组件添加单元测试

常见问题解决

1. SVG属性丢失：检查SVGO配置，确保没有过度优化
2. 类型错误：确保typescript: true选项已启用
3. 热更新不工作：检查文件监听配置是否正确
4. 性能问题：对于大量SVG，考虑分批处理

通过以上配置，你可以在Remix项目中高效地使用SVG作为React组件，享受组件化带来的各种便利。

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