Issue with currentColor not working for custom SVG icons

Question

I’m having trouble getting custom SVG icons to work as expected when using currentColor for styling. Specifically, when I import a custom .svg file as an icon component and set fill="currentColor" (or even "white"), I’m unable to override the icon’s color using className as documented.

I’ve updated the components to the latest version, but the issue persists. Here’s a quick summary of the problem:
• I’m using custom .svg files as icons.
• I’ve followed the documentation and set fill="currentColor" as well as fill="white" in the SVG.
• However, passing color classes (e.g., text-red-500) via className has no effect on the icon’s color.
• Even the example from the documentation doesn’t behave as expected on my setup.

Could someone please help clarify what might be wrong or if there are additional steps needed to make currentColor function properly for custom SVGs?

Thanks in advance!

Example from docs:

import { Icon, createIcon } from "@/components/ui/icon";
import { Path } from "react-native-svg";
    
function App () {
        const GluestackIcon = createIcon({
          viewBox: '0 0 32 32',
          path: (
            <>
              <Path d="M9.5 14.6642L15.9999 9.87633V12.1358L9.5 16.9236V14.6642Z" fill="white"/>
              <Path d="M22.5 14.6642L16.0001 9.87639V12.1359L22.5 16.9237V14.6642Z" fill="white"/>
              <Path d="M9.5 19.8641L15.9999 15.0763V17.3358L9.5 22.1236V19.8641Z" fill="white"/>
              <Path d="M22.5 19.8642L16.0001 15.0764V17.3358L22.5 22.1237V19.8642Z" fill="white"/>
            </>
          ),
        });
        return <Icon as={GluestackIcon} size='xl' className="text-typography-black"/>;
      }

Issue with currentColor not working for custom SVG icons

1 Reply