material-ui 主题SVG图标

b5lpy0ml 于 2022-10-29 发布在其他

关注(0)|答案(2)|浏览(184)

重复

我已经搜索了存在的问题

摘要💡

我有几个使用多种颜色的图标，我希望能够有效地支持明暗模式。为了实现这一点，我想在svg图标中使用我的活动主题。我确信最好的做法是创建IconLight.tsx和IconDark.tsx，但我希望加入更多的动态组件，其中图标将根据用户配置文件的偏好进行更新。
示例🌈
下面是一个我所想的例子：

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');

动机🔦

我对SVG还比较陌生，所以很可能有更好的方法来完成我上面尝试的工作。我不知道SVG的所有属性，在深入研究之前，我想我应该研究一些更熟悉的东西。
任何想法都感激不尽！

material-ui

来源：https://github.com/mui/material-ui/issues/34487

2条答案

按热度按时间

2lpgd9681#

您可以从theme.palette.mode读取模式，并在它们之间切换颜色：

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');

赞(0）回复(0）举报 2022-10-29

s71maibg2#

我确信最好的做法是创建IconLight.tsx和IconDark.tsx
对我来说，拥有一个单一的图标文件Icon.tsx听起来像是一个更好的方法。

赞(0）回复(0）举报 2022-10-29