SVGIcon

If you need a custom SVG icon, you can use the <SVGIcon> component to extend the native <svg> element:

• It comes with built-in accessibility.
• SVG elements should be scaled for a 24x24px viewport.

Import

copy
import { SVGIcon } from '@trendmicro/react-styled-ui';
import { SVGIcon } from '@trendmicro/react-styled-ui';

Usage

You can use the current text color by adding the fill="currentColor" attribute to the <path> or <g> element. This means that the fill color of the SVG will be inherited from the color value of its parent.

EDITABLE EXAMPLE
copy
<SVGIcon color="gray:50" size={24} viewBox="0 0 16 16">
  <g fill="currentColor">
    <path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8c4.418 0 8-3.582 8-8v0c0-4.418-3.582-8-8-8v0zM11 12l-3-3-3 3-1.060-1.060 3.060-2.94-3-3 1.060-1.070 2.94 2.95 2.94-2.94 1.060 1.060-2.89 3 3 3z" />
  </g>
</SVGIcon>
<SVGIcon color="gray:50" size={24} viewBox="0 0 16 16">
  <g fill="currentColor">
    <path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8c4.418 0 8-3.582 8-8v0c0-4.418-3.582-8-8-8v0zM11 12l-3-3-3 3-1.060-1.060 3.060-2.94-3-3 1.060-1.070 2.94 2.95 2.94-2.94 1.060 1.060-2.89 3 3 3z" />
  </g>
</SVGIcon>

EDITABLE EXAMPLE
copy
function Example() {
  const CustomIcon = ({ size, ...rest }) => {
    const viewBox = '0 0 16 16';
    return (
      <SVGIcon size={size} viewBox={viewBox} {...rest}>
        <g fill="currentColor">
          <path d="M15 8c0 3.866-3.134 7-7 7s-7-3.134-7-7c0-3.866 3.134-7 7-7v0c3.866 0 7 3.134 7 7v0z" />
        </g>
      </SVGIcon>
    );
  };

  return (
    <Stack direction="row" spacing="3x" align="center">
      <CustomIcon size="1x" color="blue:10" />
      <CustomIcon size="2x" color="blue:20" />
      <CustomIcon size="3x" color="blue:30" />
      <CustomIcon size="4x" color="blue:40" />
      <CustomIcon size="5x" color="blue:50" />
      <CustomIcon size="6x" color="blue:60" />
      <CustomIcon size="7x" color="blue:70" />
      <CustomIcon size="8x" color="blue:80" />
      <CustomIcon size="9x" color="blue:90" />
      <CustomIcon size="10x" color="blue:100" />
    </Stack>
  );
}
function Example() {
  const CustomIcon = ({ size, ...rest }) => {
    const viewBox = '0 0 16 16';
    return (
      <SVGIcon size={size} viewBox={viewBox} {...rest}>
        <g fill="currentColor">
          <path d="M15 8c0 3.866-3.134 7-7 7s-7-3.134-7-7c0-3.866 3.134-7 7-7v0c3.866 0 7 3.134 7 7v0z" />
        </g>
      </SVGIcon>
    );
  };

  return (
    <Stack direction="row" spacing="3x" align="center">
      <CustomIcon size="1x" color="blue:10" />
      <CustomIcon size="2x" color="blue:20" />
      <CustomIcon size="3x" color="blue:30" />
      <CustomIcon size="4x" color="blue:40" />
      <CustomIcon size="5x" color="blue:50" />
      <CustomIcon size="6x" color="blue:60" />
      <CustomIcon size="7x" color="blue:70" />
      <CustomIcon size="8x" color="blue:80" />
      <CustomIcon size="9x" color="blue:90" />
      <CustomIcon size="10x" color="blue:100" />
    </Stack>
  );
}

Props