Integrating @svgr/webpack into the TypeScript compiler was not working via the recommended route (Next.js webpack configuration). The automatic SVG-to-React component conversion was causing compilation issues and import resolution problems. Therefore, we manually convert each SVG into a TSX file using SVGR CLI with a custom template.

All scripts in this directory should be run from the opal package root (web/lib/opal/).

Directory Layout

web/lib/opal/
├── scripts/                          # SVG conversion tooling (this directory)
│   ├── convert-svg.sh                # Converts SVGs into React components
│   └── icon-template.js              # Shared SVGR template (used for icons, logos, and illustrations)
├── src/
│   ├── icons/                        # Small, single-colour icons (stroke = currentColor)
│   ├── logos/                        # Brand/vendor logos (original colours preserved)
│   └── illustrations/                # Larger, multi-colour illustrations (colours preserved)
└── package.json

Icons vs Logos vs Illustrations

	Icons	Logos	Illustrations
Import path	`@opal/icons`	`@opal/logos`	`@opal/illustrations`
Location	`src/icons/`	`src/logos/`	`src/illustrations/`
Colour	Overridable via `currentColor`	Fixed — original brand colours preserved	Fixed — original SVG colours preserved
Script flag	(none)	`--logo`	`--illustration`
Use case	UI elements, actions, navigation	Provider logos, platform logos, brand marks	Empty states, error pages, placeholders

Files in This Directory

`icon-template.js`

A custom SVGR template that generates components with the following features:

Imports IconProps from @opal/types for consistent typing
Supports the size prop for controlling icon dimensions
Includes width and height attributes bound to the size prop
Maintains all standard SVG props (className, color, title, etc.)

`convert-svg.sh`

Converts an SVG into a React component. Behaviour depends on the mode:

Icon mode (default):

Strips stroke, stroke-opacity, width, and height attributes
Adds width={size}, height={size}, and stroke="currentColor"
Result is colour-overridable via CSS color property

Logo mode (--logo):

Strips only width and height attributes (all colours preserved)
Adds width={size} and height={size}
Does not add stroke="currentColor" — logos keep their original brand colours

Illustration mode (--illustration):

Strips only width and height attributes (all colours preserved)
Adds width={size} and height={size}
Does not add stroke="currentColor" — illustrations keep their original colours

Both --logo and --illustration produce the same output — the distinction is purely organizational (different directories, different barrel exports).

All modes automatically delete the source SVG file after successful conversion.

Adding New SVGs

Icons

# From web/lib/opal/
./scripts/convert-svg.sh src/icons/my-icon.svg

Then add the export to src/icons/index.ts:

export { default as SvgMyIcon } from "@opal/icons/my-icon";

Logos

# From web/lib/opal/
./scripts/convert-svg.sh --logo src/logos/my-logo.svg

Logo naming

A logo is named after its brand:

File name: the brand in lowercase, with a hyphen only where the brand has a space. openai.tsx (OpenAI), github.tsx (GitHub), google-drive.tsx (Google Drive), lm-studio.tsx (LM Studio).
Export name: Svg followed by the brand's own capitalization, without the spaces. SvgOpenAI, SvgGitHub, SvgGoogleDrive, SvgLMStudio. A brand that starts in lowercase still starts with a capital after Svg: SvgXAI (xAI), SvgMixedbread (mixedbread).

The script names the component after the file, so openai.svg becomes SvgOpenai. Rename the component in the generated file to the brand's capitalization, and use that name in the export.

Then add the export to src/logos/index.ts:

export { default as SvgMyLogo } from "@opal/logos/my-logo";

Illustrations

# From web/lib/opal/
./scripts/convert-svg.sh --illustration src/illustrations/my-illustration.svg

Then add the export to src/illustrations/index.ts:

export { default as SvgMyIllustration } from "@opal/illustrations/my-illustration";

Manual Conversion

If you prefer to run the SVGR command directly:

For icons (strips colours):

bunx @svgr/cli <file>.svg --typescript --svgo-config '{"plugins":[{"name":"removeAttrs","params":{"attrs":["stroke","stroke-opacity","width","height"]}}]}' --template scripts/icon-template.js > <file>.tsx

For logos and illustrations (preserves colours):

bunx @svgr/cli <file>.svg --typescript --svgo-config '{"plugins":[{"name":"removeAttrs","params":{"attrs":["width","height"]}}]}' --template scripts/icon-template.js > <file>.tsx

After running either manual command, remember to delete the original SVG file.