Themed SVG Icon

[jd-carroll]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I have a handful of icons which use multiple colors and I would like to be able to efficiently support light & dark mode. To accomplish this, I would love to somehow use my active theme within the svg icon. I'm sure the best practice is to create IconLight.tsx and IconDark.tsx but I was hoping to incorporate a bit more of a dynamic component where the icon would update based on user profile preferences.

Examples 🌈

Here is an example of what I was thinking:

const MyThemedSvgComponent = (props) => {
  const theme = useTheme();
  const color1 = theme.palette.custom.primary; // pick any color from theme
  const color2 = theme.palette.custom.background; // pick any color from theme

  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
    <path fill={color1} d="M59.1172 13.4165C60.7851 14.1313 61.7383 15.9185 61.3808 17.7056C61.0234 19.4927 59.4746 20.6841 57.6875 20.6841V21.6372C57.6875 23.3052 56.3769 24.4966 54.8281 24.4966H7.17186C5.50389 24.4966 4.31249 23.3052 4.31249 21.6372V20.6841C2.40624 20.6841 0.857409 19.4927 0.499987 17.7056C0.142566 15.9185 1.09569 14.1313 2.76366 13.4165L29.4512 1.979C30.4043 1.62158 31.4766 1.62158 32.4297 1.979L59.1172 13.4165ZM31 16.8716C33.0254 16.8716 34.8125 15.2036 34.8125 13.0591C34.8125 11.0337 33.0254 9.24658 31 9.24658C28.8555 9.24658 27.1875 11.0337 27.1875 13.0591C27.1875 15.2036 28.8555 16.8716 31 16.8716Z"/>
    <circle fill={color2} cx="31" cy="12.5" r="5"/>
    </svg>
  );
};

export const MyThemedIcon = createSvgIcon(MyThemedSvgComponent, 'MyThemedIcon');

Motivation 🔦

I am relatively new to SVG's so it could well be that there is a better way to accomplish what I am trying above. I don't know all of the properties of SVG's and before doing a deep dive, I thought I would investigate something more familiar.

Any thoughts appreciated!

[siriwatknp]

You can read the modes from theme.palette.mode and switch the color between them:

const MyThemedSvgComponent = (props) => {
  const theme = useTheme();
  const color1 = theme.palette.mode === 'dark' : '#fff' : theme.palette.custom.primary; // pick any color from theme
  const color2 = theme.palette.mode === 'dark' : '#fff' : theme.palette.custom.background; // pick any color from theme

  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
    <path fill={color1} d="M59.1172 13.4165C60.7851 14.1313 61.7383 15.9185 61.3808 17.7056C61.0234 19.4927 59.4746 20.6841 57.6875 20.6841V21.6372C57.6875 23.3052 56.3769 24.4966 54.8281 24.4966H7.17186C5.50389 24.4966 4.31249 23.3052 4.31249 21.6372V20.6841C2.40624 20.6841 0.857409 19.4927 0.499987 17.7056C0.142566 15.9185 1.09569 14.1313 2.76366 13.4165L29.4512 1.979C30.4043 1.62158 31.4766 1.62158 32.4297 1.979L59.1172 13.4165ZM31 16.8716C33.0254 16.8716 34.8125 15.2036 34.8125 13.0591C34.8125 11.0337 33.0254 9.24658 31 9.24658C28.8555 9.24658 27.1875 11.0337 27.1875 13.0591C27.1875 15.2036 28.8555 16.8716 31 16.8716Z"/>
    <circle fill={color2} cx="31" cy="12.5" r="5"/>
    </svg>
  );
};

export const MyThemedIcon = createSvgIcon(MyThemedSvgComponent, 'MyThemedIcon');

[siriwatknp]

I'm sure the best practice is to create IconLight.tsx and IconDark.tsx

For me, having a single icon file Icon.tsx sounds like a better approach.