Introduction
Are you confused by SVG icons that refuse to be styled with CSS?
This article will give you a scalable workflow for styling SVG icons in your Next.js project.
We will address the problems of:
- CSS properties not applying to static SVG images
- Hard-coded attributes within SVG files that overwrite CSS properties
(The steps in this guide are specifically for Next.js v16+ and Typescript, but the concepts also apply to general React projects)
Why CSS Doesn't Work on Static SVGs
When you try to use an SVG like this:
<img src="your_icon.svg" className="icon" />
# or
<Image
src="your_icon.svg"
alt="GitHub"
width={48}
height={48}
className="icon"
/>
The SVG is treated as a static external image file, similar to a PNG or JPG. You can resize it, but you cannot style or animate the contents with CSS. The root cause is not the <img> or <Image> tag itself, but the fact that the SVG is being loaded from the public/ directory which is specifically meant for static assets.
Solution
To make our SVGs customizable with CSS, we will convert them to React components using SVGR and move them out of the the /public directory:
Install SVGR as a dev dependency
npm install --save-dev @svgr/webpack
# or use yarn
yarn add --dev @svgr/webpack
Configure SVGR in
next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
turbopack: {
rules: {
"*.svg": {
loaders: ["@svgr/webpack"],
as: "*.js",
},
},
},
};
export default nextConfig;
We are using the TurboPack asset bundler which is the fully supported default in Next.js v16.
Use the SVG in your code as follows, you must ensure that the SVG is not stored in
/public.
import GithubIcon from "@/icons/github.svg";
export default function ExternalLinks() {
return (
<GithubIcon
width={24}
height={24}
className="icon"
/>
);
}
Congratulations! Your SVG is now a React component rendered in the DOM as JSX, rather than a static file in /public. This makes it fully styleable, interactive, and dynamic.
Cleaning Hard-Coded SVG Attributes that Overwrite CSS
Some SVGs may contain hard-coded attributes that overwrite your CSS styles. In the following image, the LinkedIn icon refuses to be any color other than black.
If you open the SVG file in your text editor, you can confirm this by looking for hard-coded attributes such as fill, stroke, and style:
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<!-- Hard-coded fill attribute prevents color changes with CSS -->
<path d="..." fill="#0F0F0F"/>
</svg>
Solution
For smaller projects you can manually replace or remove hard-coded attributes that affect the appearance of the SVG.
However, this may be time consuming if you have many SVG files. Here's how you can automate this process using SVGO.
We will modify the SVG to inherit its color from CSS via the color property, making it compatible with both plain CSS and utility frameworks like Tailwind.
Install SVGO as a dev dependency
npm install -D svgo
Create a file in the root directory called
svgo.config.jswith the following code
module.exports = {
plugins: [
{
name: "preset-default",
params: {
overrides: {
removeViewBox: false, // keep viewBox for proper scaling
},
},
},
// Remove hard-coded fill, stroke, and style attributes
{
name: "removeAttrs",
params: {
attrs: "(fill|stroke|style)",
},
},
// Add fill="currentColor" to the root <svg>
{
name: "addAttributesToSVGElement",
params: {
attributes: [
{ fill: "currentColor" }
],
},
},
],
};
Add a script in
package.jsonfor cleaning the SVG files, ensure that the path points to the location where your SVG files are stored
"scripts": {
"clean-icons": "svgo --config=svgo.config.js [PATH_TO_SVG_DIRECTORY]/*.svg"
},
Run the script to automatically modify the hard-coded attributes from your SVG files that overwrite your CSS
npm run clean-icons
Conclusion
By converting your SVGs to React components with SVGR and cleaning hard-coded attributes with SVGO, you can create fully dynamic, styleable, and maintainable icons in Next.js. This workflow ensures your SVGs respond to CSS, support animations, and remain scalable.
Feel free to adapt this workflow to your own projects and share any tips or improvements you discover along the way!
SOCIAL SHARE CARD GENERATOR