# All files / src/icon SVGIcon.tsx

100% Statements 120/120
100% Branches 5/5
100% Functions 1/1
100% Lines 120/120

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    1211x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    1x
    1x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    9x
    1x
     import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
    import { icon, type SVGIconClassNameOptions } from "./styles.js";

    export interface SVGIconProps
      extends HTMLAttributes<SVGSVGElement>,
        SVGIconClassNameOptions {
      /**
       * Boolean if the SVG should gain the `focusable` attribute. This is disabled
       * by default since IE11 and Edge actually default this to true and keyboard's
       * will tab focus all SVGs.
       *
       * @defaultValue `false`
       */
      focusable?: "false" | "true" | boolean;

      /**
       * The `viewBox` attribute allows you to specify that a given set of graphics
       * stretch to fit a particular container element.
       *
       * The value of the `viewBox` attribute is a list of four numbers min-x,
       * min-y, width and height, separated by white space and/or a comma, which
       * specify a rectangle in user space which should be mapped to the bounds of
       * the viewport established by the given element, taking into account
       * attribute `preserveAspectRatio`.
       *
       * Negative values for width or height are not permitted and a value of zero
       * disables rendering of the element. An optional `viewbox` for the SVG.
       *
       * For example, if the SVG element is 250 (width) by 200 (height) and you
       * provide `viewBox="0 0 25 20"`, the coordinates inside the SVG will go from
       * the top left corner (0, 0) to the bottom right (25, 20) and each unit will
       * be worth `10px`.
       *
       * @defaultValue `"0 0 24 24"`
       */
      viewBox?: string;

      /**
       * An optional `xmlns` string to provide. The `use` prop will not work without
       * this prop defined.
       *
       *
       * Note: The default value will be `undefined` unless the {@link use} prop is
       * defined.
       *
       * @defaultValue `"http://www.w3.org/2000/svg"`
       */
      xmlns?: string;

      /**
       * This should be a link to a part of an SVG sprite map. So normally one of
       * the following:
       * - `'#some-custom-svg'`
       * - `'/images/spritemap.svg#some-custom-svg'`
       *
       * This prop **should not** be used with the `children` prop as only one will
       * be rendered.
       *
       * @remarks
       *
       * NOTE: IE **does not support** external SVGs. Please see the demo for more
       * details.
       */
      use?: string;

      /**
       * Any `<svg>` children to render to create your icon. This can not be used
       * with the `use` prop.
       */
      children?: ReactNode;
    }

    /**
     * **Server Component**
     *
     * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a
     * sprite map as an icon.
     */
    export const SVGIcon = forwardRef<SVGSVGElement, SVGIconProps>(
      function SVGIcon(props, ref) {
        const {
          "aria-hidden": ariaHidden = true,
          focusable = "false",
          use,
          xmlns = use ? "http://www.w3.org/2000/svg" : undefined,
          viewBox = "0 0 24 24",
          dense = false,
          className,
          theme,
          inline,
          children: propChildren,
          ...remaining
        } = props;

        let children = propChildren;
        if (!children && use) {
          children = <use xlinkHref={use} />;
        }

        return (
          <svg
            {...remaining}
            aria-hidden={ariaHidden}
            ref={ref}
            className={icon({
              type: "svg",
              dense,
              theme,
              inline,
              className,
            })}
            focusable={focusable}
            xmlns={xmlns}
            viewBox={viewBox}
          >
            {children}
          </svg>
        );
      }
    );