packages/icons/bin/IconTemplate.tsx.mustache

   1 import React from 'react';
   2
   3 import type { IconSize } from '../types';
   4
   5 interface IconProps extends React.SVGProps<SVGSVGElement> {
   6     /** If specified, renders an sr-only element for screenreaders */
   7     alt?: string;
   8     /** If specified, renders an inline title element */
   9     title?: string;
  10     /**
  11      * The size of the icon
  12      * Refer to the sizing taxonomy: https://design-system.protontech.ch/?path=/docs/components-icon--basic#sizing
  13      */
  14     size?: IconSize;
  15 }
  16
  17 export const {{iconName}} = ({ alt, title, size = 4, className = '', viewBox = '0 0 16 16', ...rest }: IconProps) => {
  18     return (
  19         <>
  20             <svg
  21                 viewBox={viewBox}
  22                 className={`icon-size-${size} ${className}`}
  23                 role="img"
  24                 focusable="false"
  25                 aria-hidden="true"
  26                 {...rest}
  27             >
  28                 {title ? <title>{title}</title> : null}
  29                 {{{innerHTML}}}
  30             </svg>
  31             {alt ? <span className="sr-only">{alt}</span> : null}
  32         </>
  33     );
  34 };