Next.js Discord

Discord Forum

Trouble using .svg files

Unanswered
Gharial posted this in #help-forum
Open in Discord
GharialOP
I've been given svg files, but they're all in black and I cannot customise the svg icons to be white. I did some research and found that SVGR allows me to convert these files into react components, but they don't seem to work after configuration due to the error in the first screenshot. 
"use client";
import { Button } from "@heroui/button";
import { Image } from "@heroui/image";
import Izza from "@/svg/izza.svg";
import {
  NavbarBrand,
  Navbar as HeroBar,
  NavbarContent,
  NavbarItem,
} from "@heroui/navbar";
import Link from "next/link";
import React from "react";
import { FaPhoneAlt } from "react-icons/fa";

const Navbar = () => {
  console.log(Izza);
  return (
    <HeroBar
      position="sticky"
      classNames={{
        base: "fixed top-0 bg-transparent text-white",
        wrapper: "max-w-[1500px] mx-auto",
      }}
      isBlurred={false}
    >
      <NavbarBrand>
        {/* <Image src={"/assets/svg/izza.svg"} width={70} radius="none" /> */}
        <Izza />
      </NavbarBrand>

      <NavbarContent className="font-bold gap-6" justify="center">
        <NavbarItem>
          <Link href="#">Menu</Link>
        </NavbarItem>
        <NavbarItem>
          <Link href="#">Family</Link>
        </NavbarItem>
        <NavbarItem>
          <Link href="#">Find Us</Link>
        </NavbarItem>
      </NavbarContent>

      <NavbarContent justify="end">
        <Button
          as={Link}
          href="#"
          className="font-bold text-white"
          variant="light"
        >
          Contact Us
          <FaPhoneAlt />
        </Button>
      </NavbarContent>
    </HeroBar>
  );
};

export default Navbar;

6 Replies

American Wirehair
have you set up svgr correctly? make sure youve installed and added its webpack rules @svgr/webpack to your next.config.js

https://react-svgr.com/docs/next/

if youre using turbopack with the newer versions of next, you'll instead want to do something like this:

(note that im using next.config.ts here so youll want to strip out the types if youre using .js)

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
    // load svgr rulesets (to transform svg imports into components)
    turbopack: {
        rules: {
            '*.svg': {
                as: '*.js',
                loaders: ['@svgr/webpack'],
            },
        },
    },
    webpack(config) {
        config.module.rules.push({
            test: /\.svg$/i,
            use: ['@svgr/webpack'],
        });
        return config;
    },

    // rest of nextjs config
};

export default nextConfig;
your actual importing of the svg and using it is correct otherwise so its probably this
bit late now though
I wish it mentioned this in the docs
American Wirehair
Yeah took me a while to find too, assume they haven’t updated it for turbopack yet