@equinor/eds-core-react/dist/esm/components/Icon/Icon.js

The React implementation of the Equinor Design System

import { useId } from '@equinor/eds-utils';
import { forwardRef } from 'react';
import styled from 'styled-components';
import { get } from './library.js';
import { jsxs, jsx } from 'react/jsx-runtime';

const StyledSvg = styled.svg.attrs(({
  $height,
  $width,
  fill
}) => ({
  name: null,
  xmlns: 'http://www.w3.org/2000/svg',
  height: `${$height}px`,
  width: `${$width}px`,
  fill
})).withConfig({
  displayName: "Icon__StyledSvg",
  componentId: "sc-6evbi1-0"
})(["transform:", ";"], ({
  $rotation
}) => $rotation ? `rotate(${$rotation}deg)` : 'none');
const StyledPath = styled.path.attrs(({
  $height,
  $size
}) => ({
  size: null,
  fillRule: 'evenodd',
  clipRule: 'evenodd',
  transform: $size / $height !== 1 ? `scale(${$size / $height})` : null
})).withConfig({
  displayName: "Icon__StyledPath",
  componentId: "sc-6evbi1-1"
})([""]);
const findIcon = (name, data, size) => {
  // eslint-disable-next-line prefer-const
  const icon = data ?? get(name);
  if (size < 24) {
    // fallback to normal icon if small is not made yet
    return icon.sizes?.small || icon;
  }
  return icon;
};
const Icon = /*#__PURE__*/forwardRef(function Icon({
  size,
  color = 'currentColor',
  name,
  rotation,
  title,
  data,
  ...rest
}, ref) {
  // eslint-disable-next-line prefer-const
  const icon = findIcon(name, data, size);
  if (typeof icon === 'undefined') {
    throw Error(`Icon "${name}" not found. Have you added it using Icon.add() or using data props?`);
  }
  const $height = size ? size : parseInt(icon.width);
  const $width = size ? size : parseInt(icon.height);
  let svgProps = {
    $height,
    $width,
    fill: color,
    viewBox: `0 0 ${$width} ${$height}`,
    $rotation: rotation,
    name,
    'aria-hidden': true
  };
  const pathProps = {
    $height: icon.height ? parseInt(icon.height) : size,
    $size: size || parseInt(icon.height)
  };

  // Accessibility
  const titleId = useId(null, `${icon.prefix}-${icon.name}`);
  if (title) {
    svgProps = {
      ...svgProps,
      title,
      role: 'img',
      'aria-hidden': undefined,
      'aria-labelledby': titleId
    };
  }
  return /*#__PURE__*/jsxs(StyledSvg, {
    ...svgProps,
    ...rest,
    ref: ref,
    children: [title && /*#__PURE__*/jsx("title", {
      id: titleId,
      children: title
    }), Array.isArray(icon.svgPathData) ? icon.svgPathData.map(pathData => {
      return /*#__PURE__*/jsx(StyledPath, {
        ...pathProps,
        d: pathData
      }, pathData);
    }) : /*#__PURE__*/jsx(StyledPath, {
      "data-testid": "eds-icon-path",
      ...pathProps,
      d: icon.svgPathData
    })]
  });
});

// Icon.displayName = 'EdsIcon'

export { Icon };