https://github.com/joaoneto/swc-plugin-svg-component
Um plugin SWC minimalista, ultrarrápido e escrito em Rust. Experimental, feito pra testar o Turbopack do Next.js.
https://github.com/joaoneto/swc-plugin-svg-component
nextjs nodejs react rust swc swc-plugin turbopack wasm webassembly
Last synced: 2 months ago
JSON representation
Um plugin SWC minimalista, ultrarrápido e escrito em Rust. Experimental, feito pra testar o Turbopack do Next.js.
- Host: GitHub
- URL: https://github.com/joaoneto/swc-plugin-svg-component
- Owner: joaoneto
- Created: 2025-07-03T21:38:15.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-07-12T03:56:05.000Z (3 months ago)
- Last Synced: 2025-07-12T05:34:03.943Z (3 months ago)
- Topics: nextjs, nodejs, react, rust, swc, swc-plugin, turbopack, wasm, webassembly
- Language: Rust
- Homepage:
- Size: 32.2 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# swc-plugin-svg-component
Plugin SWC minimalista para transformar arquivos SVG em componentes React de forma rápida e integrada ao pipeline de build.
Desenvolvido pensando em fluxos modernos com SWC e Next.js, inclusive com Turbopack.
Este projeto é uma alternativa de propósito restrito ao SVGR, que é muito mais completo e amplamente testado. O objetivo aqui é ter um plugin enxuto, escrito em Rust e exportado como WebAssembly, que transforma SVGs em componentes React válidos.
Ele cuida apenas do essencial: substitui atributos problemáticos como `class` por `className`, converte `style` em objeto JavaScript e normaliza nomes de atributos com hífen para camelCase, por exemplo `stroke-width` vira `strokeWidth`.
A ideia é oferecer um fluxo de transformação direto no compilador, sem etapas manuais ou scripts adicionais além do build.
> [!WARNING]
> Este plugin é experimental e pode não ser estável para produção. Seu funcionamento depende de partes internas do SWC e de integrações específicas com o Next.js. Mudanças frequentes nesses projetos podem quebrar o plugin sem aviso. Use por sua conta e risco, especialmente em ambiente de produção. Para projetos que exigem compatibilidade garantida e suporte a todos os edge cases de SVG no React, recomenda-se utilizar o [SVGR](https://react-svgr.com/).
> [!NOTE]
> Este repositório está em fase inicial e serve como experimento para testar o poder do SWC com transformações via plugin em Rust. Ele é útil como laboratório para estudar fluxos de build modernos, criação de plugins WASM e integração com pipelines como o Turbopack.
## Instalação
Adicione o pacote ao seu projeto:
```bash
npm install swc-plugin-svg-component
````
---
## Como usar
### Build com .swcrc
No seu `.swcrc` ou configuração SWC customizada, adicione este plugin:
```json
{
"jsc": {
"experimental": {
"plugins": [
["swc-plugin-svg-component", {}]
]
}
}
}
```
Para compilar, rode o swc cli incluindo a extensão .svg:
```bash
swc src -d dist --extensions .ts,.js,.tsx,.jsx,.svg
```
### Build com vite
No seu `vite.config.ts`, adicione este plugin:
```typescript
import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import dts from 'vite-plugin-dts';
import svgComponent from 'swc-plugin-svg-component/vite';
export default defineConfig({
// ... outras configurações
plugins: [
svgComponent(),
react(),
// ... outros plugins para vite
],
});
```
Para compilar, rode a linha de comando que execute `vite build`, exemplo:
```bash
npm run build
```
### Build com Next.js 15+
No seu `next.cofig.ts`, adicione o loader para turbopack:
```typescript
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
turbopack: {
rules: {
'*.svg': {
loaders: [
{
loader: "swc-plugin-svg-component/turbopack",
options: {},
},
],
as: '*.js',
},
},
},
};
export default nextConfig;
```
Inicie o script dev do Next.js:
```
npm run dev
```
**Exemplo de uso:**
Importe um SVG como componente React:
```jsx
import MyIcon from './icon.svg';
export default function Page() {
return ;
}
```
---
## Desenvolvimento
### Build do plugin
Para compilar (com cargo) o plugin e gerar o `/dist`, utilize o npm script:
```bash
npm run build
```