Loading SVG Assets

The svgLoader configuration key controls how SVG assets are loaded. There are three options: asset (default), svgr, and both. The asset option returns the asset's URL, the svgr option returns a React component, and both returns both the asset's URL and the React component (not supported in vite-svgr-plugin version 4.2 or higher).

svgLoader 

  • Description: Configures how SVG assets load in Codux.
  • Type: String
  • Options: "asset", "svgr", "both"
  • Default: "asset"

asset 

Codux automatically loads assets this way by default, so there's no need for configuration. However, if you choose to configure this option in codux.config.json, the setup should look as follows:
1
2
3
4
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    "svgLoader": "asset"
}
Imports using asset look like this. The asset's URL is returned as a string:
1
import svgUrl from "./file.svg";

svgr 

To import an SVG asset as a component, use the svgr setting like this:
1
2
3
4
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    "svgLoader": "svgr"
}
In this import statement, "MySvgComponent" is the ReactComponent being imported.
1
import MySvgComponent from "./file.svg";

both 

This option lets Codux import both the URL of the asset, and the ReactComponent component. When creating an app using Create React App, configuration like this is most applicable.
1
2
3
4
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    "svgLoader": "both"
}
This import statement returns the asset's URL and/or the SVG ReactComponent.
1
import svgUrl, { ReactComponent as MySvgComponent } from "./file.svg";
Important!
If you're using vite-svgr-plugin version 4.2 or higher, you should use option asset and query param ?react to import an SVG asset as component: import MySvgComponent from "./file.svg?react";
IN THIS ARTICLE
Previous article
Next article