Dynamic SVG images using Next.js

Our great sponsors

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App

InfluxDB - Power Real-Time Data Analytics at Scale

WorkOS - The modern identity platform for B2B SaaS

Our great sponsors

svgo

29 20,349 9.0 JavaScript

⚙️ Node.js tool for optimizing SVG files

In addition to the techniques we’ve discussed so far, there are optimization tools available that can further enhance SVG images. These tools, such as SVGO and ImageOptim, offer valuable features to reduce file size and clean up SVG markup, making it easier to standardize and optimize the overall performance of SVG assets.

blog-articles

1 1 5.4 TypeScript

As we delve into this discussion, it’s important to know that we’ve conveniently made the solutions discussed in this article accessible via our GitHub repository. This will allow you to engage more practically with the topics we explore.

SurveyJS

surveyjs.io sponsored

Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Next.js

2,042 120,572 10.0 JavaScript

The React Framework

In this example, we’ve added id properties to all circles, allowing us to target them individually within the tag. I’ve defined two “color modes” called oceanBreeze and sunsetGlow. You can set the color mode by adding a data-color-mode property to the element. To preview the SVG and see the live result, you can install an SVG preview plugin for VSCode or use other similar tools. For example, to view the SVG with the oceanBreeze color mode, modify the code as follows:
 viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" data-color-mode="oceanBreeze">
 
Enter fullscreen mode Exit fullscreen mode
To control the color mode using React, let’s create a new page.tsx in a directory named circles-inline-style:
import CirclesInlineStyle from "./CirclesInlineStyle.svg";

export default function CirclesInlineStylePage() {
 return <CirclesInlineStyle data-color-mode="sunsetGlow" />;
}
Enter fullscreen mode Exit fullscreen mode
The resulting SVG will display the circles with the expected colors:

⚠ Be cautious when using inline styles, as different browsers may produce varying results. Make sure to test carefully. Additionally, setting styles on elements like or using advanced CSS may lead to cross-browser issues. Sticking to basic styles will help avoid these problems.

2) Using Next.js’ built-in CSS modules

To implement this approach, let’s create a new page in a directory called circles-css-module. Within this directory, we’ll create a new CSS module file named circles.module.css:
/** Ocean breeze */
.oceanBreeze [data-node-id="top-right-circle"] {
 fill: DeepSkyBlue;
}

.oceanBreeze [data-node-id="top-left-circle"] {
 fill: MediumAquaMarine;
}

.oceanBreeze [data-node-id="bottom-right-circle"] {
 fill: CornflowerBlue;
}

/** Sunset glow */
.sunsetGlow [data-node-id="top-right-circle"] {
 fill: Coral;
}

.sunsetGlow [data-node-id="top-left-circle"] {
 fill: Gold;
}

.sunsetGlow [data-node-id="bottom-right-circle"] {
 fill: DarkOrange;
}
Enter fullscreen mode Exit fullscreen mode
In this CSS module file, we define different selectors for the color modes “oceanBreeze” and “sunsetGlow”. Instead of using the id selector, we use attribute selectors with data-node-id. This is because the SVGR loader removes any id attributes from elements when inline styles are not used, to avoid collisions with the parent HTML document.

Next, let’s create a new SVG file named CirclesCssModule.svg in the same directory. This SVG file will be identical to the one used in the inline style approach but without the </code> tag. Also, we’ll use <code>data-node-id</code> attributes instead of <code>id</code> to identify the circles: <div class="highlight js-code-highlight"> <pre class="highlight xml"><code><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <g transform="matrix(1,0,0,1,0,0)">  <circle data-node-id="top-left-circle" fill="black" cx="50" cy="50" r="40" />  <circle data-node-id="top-right-circle" fill="black" cx="150" cy="40" r="30" />  <circle data-node-id="bottom-right-circle" fill="black" cx="150" cy="150" r="20" /> </g> </svg> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> Now, let’s create a new <code>page.tsx</code> file where we can import the SVG component and apply the CSS module: <div class="highlight js-code-highlight"> <pre class="highlight tsx"><code>import CirclesCssModule from "./CirclesCssModule.svg"; import styles from "./circles.module.css"; export default function CirclesCssModulePage() { return <CirclesCssModule className={styles.sunsetGlow} />; } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> In this example, we import the <code>CirclesCssModule</code> component from the <code>CirclesCssModule.svg</code> file. We also import the generated CSS module file <code>styles</code> that contain the class names for the color modes. By applying the <code>styles.sunsetGlow</code> class name as a prop to the <code>CirclesCssModule</code> component, we can dynamically set the color mode. The resulting SVG will appear the same as the inline style approach but with the advantage of being able to separate the CSS into a style sheet. This means you can utilize additional features like <a href="https://nextjs.org/docs/app/building-your-application/styling/sass">Sass</a>, which is not natively supported within SVG files. However, one drawback of this approach is that you can no longer preview the styles using standard preview tools since React is required to apply the styles dynamically. <h4> <a name="3-using-a-helper-function" href="#3-using-a-helper-function"> </a> 3) Using a helper function </h4> If predefining styles isn’t an option for you and you’re seeking greater flexibility, using a wrapping component may be your only remaining option. We’ve already created such a component to demonstrate how this can be achieved. However, please note that due to the nature of SVGR imports, this is not entry-level code. You can create the helper function under the <code>/src</code> directory and name it <code>SvgController.ts</code>: <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code>import React from "react"; type ExtendedSVGProps = React.SVGProps<SVGSVGElement> & { [attr: string]: string; }; type ControlRule = { selector: { attributeName: string; attributeValue: string; }; props: React.SVGProps<SVGSVGElement>; }; type ControlRules = ControlRule[]; /** * Get an object that indexes control rules. * * @param rules - The control rules. * * @returns An object that indexes control rules. */ const getPropsSelectorIndex = ( rules: ControlRules ): { [key: string]: React.SVGProps<SVGSVGElement> } => { return rules.reduce((acc, config) => { const { attributeName, attributeValue } = config.selector; acc[attributeName + ":" + attributeValue] = config.props; return acc; }, {} as { [key: string]: React.SVGProps<SVGSVGElement> }); }; /** * Clone a React node and its children while trying to inject new props. * * @param node - The node to clone. * @param propsSelectorIndex - An object that indexes control rules. * * @returns The cloned node with new props when applicable. */ const cloneNode = ( node: React.ReactElement<ExtendedSVGProps>, propsSelectorIndex: { [key: string]: React.SVGProps<SVGSVGElement> } ): React.ReactElement<ExtendedSVGProps> => { const { children, ...restProps } = node.props; let nodeProps: Partial<ExtendedSVGProps> & React.Attributes = { ...restProps, }; const matchingProps = propsSelectorIndex[ Object.entries(nodeProps).find( ([key, value]) => propsSelectorIndex[key + ":" + value] )?.[0] + ":" + Object.entries(nodeProps).find( ([key, value]) => propsSelectorIndex[key + ":" + value] )?.[1] ]; if (matchingProps) { const compatibleProps = Object.entries(matchingProps).reduce( (acc, [propKey, propValue]) => { if (typeof propValue === "string") { acc[propKey] = propValue; } return acc; }, {} as ExtendedSVGProps ); nodeProps = { ...nodeProps, ...compatibleProps }; } const clonedChildren = React.Children.map(children, (child) => React.isValidElement<ExtendedSVGProps>(child) ? cloneNode(child, propsSelectorIndex) : child ); return React.cloneElement(node, nodeProps, clonedChildren); }; /** * Type guard to check if a React node is a functional component. * * @param node - A React node to check. * * @returns True if it's a functional component, otherwise false. */ const isFunctionalComponent = ( node: React.ReactNode ): node is React.FunctionComponentElement<React.SVGProps<SVGSVGElement>> => { return ( node !== null && typeof node === "object" && "type" in node && typeof node.type === "function" ); }; /** * Component to control the internal nodes of an SVG image. */ export const SvgController: React.FC<{ rules: ControlRules; children: React.ReactElement<ExtendedSVGProps>; }> = ({ rules, children }) => { if (!isFunctionalComponent(children)) { return children; } const SvgComponent = children.type({}); const propsSelectorIndex = getPropsSelectorIndex(rules); return React.isValidElement<ExtendedSVGProps>(SvgComponent) ? cloneNode(SvgComponent, propsSelectorIndex) : children; }; </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> What this component does is that it deconstructs the child React element provided by SVGR Webpack and then scans for any matching <code>rules</code> to inject the desired props. The main benefit of this approach is the ability to dynamically specify the injected color instead of predefining them in a style sheet. However, there may be a drawback in terms of performance. Although I haven’t benchmarked this function, it is possible that heavy usage could lead to performance issues. Now, let’s see it in action! First, create a new directory called <code>circles-helper-function</code> where we can add a new SVG image named <code>CirclesHelperFunction.svg</code>. Use the same SVG markup as the one used by the CSS module (<code>CirclesCssModule.svg</code>). Next, let’s create a new <code>page.tsx</code> file to demonstrate how the helper function can be utilized: <div class="highlight js-code-highlight"> <pre class="highlight tsx"><code>"use client"; import { useEffect, useState } from "react"; import CirclesHelperFunction from "./CirclesHelperFunction.svg"; import { SvgController } from "@/src/SvgController"; const getRandomColor = () => "#" + Math.floor(Math.random() * 16777215).toString(16); export default function CirclesHelperFunctionPage() { const [topLeftCircleColor, setTopLeftCircleColor] = useState("none"); const [topRightCircleColor, setTopRightCircleColor] = useState("none"); const [bottomLeftCircleColor, setBottomLeftCircleColor] = useState("none"); useEffect(() => { const interval = setInterval(() => { setTopLeftCircleColor(getRandomColor()); setTopRightCircleColor(getRandomColor()); setBottomLeftCircleColor(getRandomColor()); }, 100); return () => clearInterval(interval); }, []); return ( <> <SvgController rules={[ { selector: { attributeName: "data-node-id", attributeValue: "top-left-circle", }, props: { fill: topLeftCircleColor }, }, { selector: { attributeName: "data-node-id", attributeValue: "top-right-circle", }, props: { fill: topRightCircleColor }, }, { selector: { attributeName: "data-node-id", attributeValue: "bottom-left-circle", }, props: { fill: bottomLeftCircleColor }, }, ]} > <CirclesHelperFunction /> </SvgController> </> ); } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> Because the color of each circle is tracked as a state, every time <code>useEffect</code> changes the color, the <code>SvgController</code> component is updated, which then propagates those changes to the <code>CirclesHelperFunction</code> component. This approach allows you to use a standard SVG file and control all of its nodes using standard React code. <h2> <a name="using-the-components-provided-in-this-article" href="#using-the-components-provided-in-this-article"> </a> Using the components provided in this article </h2> While we’ve provided useful components in this article, it’s important to understand that they should be used with caution. The main challenge I faced when creating these components was due to the SVGR Webpack loader returning a functional component that doesn’t offer the same extended capabilities as the original component. This means that, to add these capabilities, we have to use APIs like <code>React.cloneElement</code>, which is <a href="https://react.dev/reference/react/cloneElement">not recommended</a> by React. I even had to go a step further and invoke the functional component using <code>.type()</code>, an internal React API not documented in the official React resources. The “proper” approach to creating these components would likely involve writing a wrapper for the SVGR webpack loader, enabling the same manipulations directly from the imported component. That being said, while generally it is advised against using <code>cloneElement</code> or internal APIs, the risk is relatively low in this specific use case given the widespread usage of React. If you prefer to err on the side of caution, all the other examples presented without using these components are safe to use and already offer sufficient flexibility for most common use cases. <h2> <a name="conclusion" href="#conclusion"> </a> Conclusion </h2> In conclusion, the information shared in this article aims to empower you to fully utilize the potential of SVG images. SVGs are incredibly useful for design purposes, especially when combined with popular UI frameworks and tools. This combination allows you to create visually appealing and interactive web experiences. While the focus of this article is mainly on Next.js and React, you can achieve similar results using other technologies by following similar approaches. Ultimately, these techniques work within HTML documents and web browsers, making them universally applicable. So go ahead and dive into using SVGs in your projects using these new tricks, and experience the incredible results they can offer.

Visual Studio Code

2,840 158,095 10.0 TypeScript

Visual Studio Code

In this example, we’ve added id properties to all circles, allowing us to target them individually within the tag. I’ve defined two “color modes” called oceanBreeze and sunsetGlow. You can set the color mode by adding a data-color-mode property to the element. To preview the SVG and see the live result, you can install an SVG preview plugin for VSCode or use other similar tools. For example, to view the SVG with the oceanBreeze color mode, modify the code as follows:
 viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" data-color-mode="oceanBreeze">
 
Enter fullscreen mode Exit fullscreen mode
To control the color mode using React, let’s create a new page.tsx in a directory named circles-inline-style:
import CirclesInlineStyle from "./CirclesInlineStyle.svg";

export default function CirclesInlineStylePage() {
 return <CirclesInlineStyle data-color-mode="sunsetGlow" />;
}
Enter fullscreen mode Exit fullscreen mode
The resulting SVG will display the circles with the expected colors:

⚠ Be cautious when using inline styles, as different browsers may produce varying results. Make sure to test carefully. Additionally, setting styles on elements like or using advanced CSS may lead to cross-browser issues. Sticking to basic styles will help avoid these problems.

2) Using Next.js’ built-in CSS modules

To implement this approach, let’s create a new page in a directory called circles-css-module. Within this directory, we’ll create a new CSS module file named circles.module.css:
/** Ocean breeze */
.oceanBreeze [data-node-id="top-right-circle"] {
 fill: DeepSkyBlue;
}

.oceanBreeze [data-node-id="top-left-circle"] {
 fill: MediumAquaMarine;
}

.oceanBreeze [data-node-id="bottom-right-circle"] {
 fill: CornflowerBlue;
}

/** Sunset glow */
.sunsetGlow [data-node-id="top-right-circle"] {
 fill: Coral;
}

.sunsetGlow [data-node-id="top-left-circle"] {
 fill: Gold;
}

.sunsetGlow [data-node-id="bottom-right-circle"] {
 fill: DarkOrange;
}
Enter fullscreen mode Exit fullscreen mode
In this CSS module file, we define different selectors for the color modes “oceanBreeze” and “sunsetGlow”. Instead of using the id selector, we use attribute selectors with data-node-id. This is because the SVGR loader removes any id attributes from elements when inline styles are not used, to avoid collisions with the parent HTML document.

Next, let’s create a new SVG file named CirclesCssModule.svg in the same directory. This SVG file will be identical to the one used in the inline style approach but without the </code> tag. Also, we’ll use <code>data-node-id</code> attributes instead of <code>id</code> to identify the circles: <div class="highlight js-code-highlight"> <pre class="highlight xml"><code><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <g transform="matrix(1,0,0,1,0,0)">  <circle data-node-id="top-left-circle" fill="black" cx="50" cy="50" r="40" />  <circle data-node-id="top-right-circle" fill="black" cx="150" cy="40" r="30" />  <circle data-node-id="bottom-right-circle" fill="black" cx="150" cy="150" r="20" /> </g> </svg> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> Now, let’s create a new <code>page.tsx</code> file where we can import the SVG component and apply the CSS module: <div class="highlight js-code-highlight"> <pre class="highlight tsx"><code>import CirclesCssModule from "./CirclesCssModule.svg"; import styles from "./circles.module.css"; export default function CirclesCssModulePage() { return <CirclesCssModule className={styles.sunsetGlow} />; } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> In this example, we import the <code>CirclesCssModule</code> component from the <code>CirclesCssModule.svg</code> file. We also import the generated CSS module file <code>styles</code> that contain the class names for the color modes. By applying the <code>styles.sunsetGlow</code> class name as a prop to the <code>CirclesCssModule</code> component, we can dynamically set the color mode. The resulting SVG will appear the same as the inline style approach but with the advantage of being able to separate the CSS into a style sheet. This means you can utilize additional features like <a href="https://nextjs.org/docs/app/building-your-application/styling/sass">Sass</a>, which is not natively supported within SVG files. However, one drawback of this approach is that you can no longer preview the styles using standard preview tools since React is required to apply the styles dynamically. <h4> <a name="3-using-a-helper-function" href="#3-using-a-helper-function"> </a> 3) Using a helper function </h4> If predefining styles isn’t an option for you and you’re seeking greater flexibility, using a wrapping component may be your only remaining option. We’ve already created such a component to demonstrate how this can be achieved. However, please note that due to the nature of SVGR imports, this is not entry-level code. You can create the helper function under the <code>/src</code> directory and name it <code>SvgController.ts</code>: <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code>import React from "react"; type ExtendedSVGProps = React.SVGProps<SVGSVGElement> & { [attr: string]: string; }; type ControlRule = { selector: { attributeName: string; attributeValue: string; }; props: React.SVGProps<SVGSVGElement>; }; type ControlRules = ControlRule[]; /** * Get an object that indexes control rules. * * @param rules - The control rules. * * @returns An object that indexes control rules. */ const getPropsSelectorIndex = ( rules: ControlRules ): { [key: string]: React.SVGProps<SVGSVGElement> } => { return rules.reduce((acc, config) => { const { attributeName, attributeValue } = config.selector; acc[attributeName + ":" + attributeValue] = config.props; return acc; }, {} as { [key: string]: React.SVGProps<SVGSVGElement> }); }; /** * Clone a React node and its children while trying to inject new props. * * @param node - The node to clone. * @param propsSelectorIndex - An object that indexes control rules. * * @returns The cloned node with new props when applicable. */ const cloneNode = ( node: React.ReactElement<ExtendedSVGProps>, propsSelectorIndex: { [key: string]: React.SVGProps<SVGSVGElement> } ): React.ReactElement<ExtendedSVGProps> => { const { children, ...restProps } = node.props; let nodeProps: Partial<ExtendedSVGProps> & React.Attributes = { ...restProps, }; const matchingProps = propsSelectorIndex[ Object.entries(nodeProps).find( ([key, value]) => propsSelectorIndex[key + ":" + value] )?.[0] + ":" + Object.entries(nodeProps).find( ([key, value]) => propsSelectorIndex[key + ":" + value] )?.[1] ]; if (matchingProps) { const compatibleProps = Object.entries(matchingProps).reduce( (acc, [propKey, propValue]) => { if (typeof propValue === "string") { acc[propKey] = propValue; } return acc; }, {} as ExtendedSVGProps ); nodeProps = { ...nodeProps, ...compatibleProps }; } const clonedChildren = React.Children.map(children, (child) => React.isValidElement<ExtendedSVGProps>(child) ? cloneNode(child, propsSelectorIndex) : child ); return React.cloneElement(node, nodeProps, clonedChildren); }; /** * Type guard to check if a React node is a functional component. * * @param node - A React node to check. * * @returns True if it's a functional component, otherwise false. */ const isFunctionalComponent = ( node: React.ReactNode ): node is React.FunctionComponentElement<React.SVGProps<SVGSVGElement>> => { return ( node !== null && typeof node === "object" && "type" in node && typeof node.type === "function" ); }; /** * Component to control the internal nodes of an SVG image. */ export const SvgController: React.FC<{ rules: ControlRules; children: React.ReactElement<ExtendedSVGProps>; }> = ({ rules, children }) => { if (!isFunctionalComponent(children)) { return children; } const SvgComponent = children.type({}); const propsSelectorIndex = getPropsSelectorIndex(rules); return React.isValidElement<ExtendedSVGProps>(SvgComponent) ? cloneNode(SvgComponent, propsSelectorIndex) : children; }; </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> What this component does is that it deconstructs the child React element provided by SVGR Webpack and then scans for any matching <code>rules</code> to inject the desired props. The main benefit of this approach is the ability to dynamically specify the injected color instead of predefining them in a style sheet. However, there may be a drawback in terms of performance. Although I haven’t benchmarked this function, it is possible that heavy usage could lead to performance issues. Now, let’s see it in action! First, create a new directory called <code>circles-helper-function</code> where we can add a new SVG image named <code>CirclesHelperFunction.svg</code>. Use the same SVG markup as the one used by the CSS module (<code>CirclesCssModule.svg</code>). Next, let’s create a new <code>page.tsx</code> file to demonstrate how the helper function can be utilized: <div class="highlight js-code-highlight"> <pre class="highlight tsx"><code>"use client"; import { useEffect, useState } from "react"; import CirclesHelperFunction from "./CirclesHelperFunction.svg"; import { SvgController } from "@/src/SvgController"; const getRandomColor = () => "#" + Math.floor(Math.random() * 16777215).toString(16); export default function CirclesHelperFunctionPage() { const [topLeftCircleColor, setTopLeftCircleColor] = useState("none"); const [topRightCircleColor, setTopRightCircleColor] = useState("none"); const [bottomLeftCircleColor, setBottomLeftCircleColor] = useState("none"); useEffect(() => { const interval = setInterval(() => { setTopLeftCircleColor(getRandomColor()); setTopRightCircleColor(getRandomColor()); setBottomLeftCircleColor(getRandomColor()); }, 100); return () => clearInterval(interval); }, []); return ( <> <SvgController rules={[ { selector: { attributeName: "data-node-id", attributeValue: "top-left-circle", }, props: { fill: topLeftCircleColor }, }, { selector: { attributeName: "data-node-id", attributeValue: "top-right-circle", }, props: { fill: topRightCircleColor }, }, { selector: { attributeName: "data-node-id", attributeValue: "bottom-left-circle", }, props: { fill: bottomLeftCircleColor }, }, ]} > <CirclesHelperFunction /> </SvgController> </> ); } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> Because the color of each circle is tracked as a state, every time <code>useEffect</code> changes the color, the <code>SvgController</code> component is updated, which then propagates those changes to the <code>CirclesHelperFunction</code> component. This approach allows you to use a standard SVG file and control all of its nodes using standard React code. <h2> <a name="using-the-components-provided-in-this-article" href="#using-the-components-provided-in-this-article"> </a> Using the components provided in this article </h2> While we’ve provided useful components in this article, it’s important to understand that they should be used with caution. The main challenge I faced when creating these components was due to the SVGR Webpack loader returning a functional component that doesn’t offer the same extended capabilities as the original component. This means that, to add these capabilities, we have to use APIs like <code>React.cloneElement</code>, which is <a href="https://react.dev/reference/react/cloneElement">not recommended</a> by React. I even had to go a step further and invoke the functional component using <code>.type()</code>, an internal React API not documented in the official React resources. The “proper” approach to creating these components would likely involve writing a wrapper for the SVGR webpack loader, enabling the same manipulations directly from the imported component. That being said, while generally it is advised against using <code>cloneElement</code> or internal APIs, the risk is relatively low in this specific use case given the widespread usage of React. If you prefer to err on the side of caution, all the other examples presented without using these components are safe to use and already offer sufficient flexibility for most common use cases. <h2> <a name="conclusion" href="#conclusion"> </a> Conclusion </h2> In conclusion, the information shared in this article aims to empower you to fully utilize the potential of SVG images. SVGs are incredibly useful for design purposes, especially when combined with popular UI frameworks and tools. This combination allows you to create visually appealing and interactive web experiences. While the focus of this article is mainly on Next.js and React, you can achieve similar results using other technologies by following similar approaches. Ultimately, these techniques work within HTML documents and web browsers, making them universally applicable. So go ahead and dive into using SVGs in your projects using these new tricks, and experience the incredible results they can offer.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

How Next.js 13's CSS modules & Loading State Feature Can Improve User Experience
5 projects | dev.to | 27 Apr 2023
Use Markdoc and Next.js to Build a Git-powered Markdown Blog
7 projects | dev.to | 14 Feb 2023
How to add Dark mode in Next.js Application using Tailwind CSS.
5 projects | dev.to | 15 May 2022
Automate your Vue Icon Library
3 projects | dev.to | 19 Oct 2021
Stripe Checkout With Next.js - The Complete Guide
5 projects | dev.to | 21 Sep 2021

Dynamic SVG images using Next.js

This page summarizes the projects mentioned and recommended in the original post on dev.to
IDE Web Frameworks SVG React Minification
Post date: 17 Jun 2023

svgo

blog-articles

SurveyJS

Next.js

2) Using Next.js’ built-in CSS modules

Visual Studio Code

2) Using Next.js’ built-in CSS modules

Related posts

Dynamic SVG images using Next.js

This page summarizes the projects mentioned and recommended in the original post on dev.to IDE Web Frameworks SVG React Minification Post date: 17 Jun 2023

svgo

blog-articles

SurveyJS

Next.js

2) Using Next.js’ built-in CSS modules

Visual Studio Code

2) Using Next.js’ built-in CSS modules

Related posts

This page summarizes the projects mentioned and recommended in the original post on dev.to
IDE Web Frameworks SVG React Minification
Post date: 17 Jun 2023