Icon

Maintainer:
amje
GitHub
import {Icon} from '@gravity-ui/uikit';

The Icon component is a wrapper for SVG icon. SVGs can be loaded in different ways, such as though a React component or various Webpack loaders: SVGR, svg-react-loader, svg-inline-loader, or svg-sprite-loader. The Icon component serves as a proxy to use through the codebase.

React component

// CheckIcon.jsx
export function CheckIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
      <path d="M13.488 3.43a.75.75 0 0 1 .081 1.058l-6 7a.75.75 0 0 1-1.1.042l-3.5-3.5A.75.75 0 0 1 4.03 6.97l2.928 2.927 5.473-6.385a.75.75 0 0 1 1.057-.081Z" />
    </svg>
  );
}

// ---
import {CheckIcon} from './CheckIcon';

<Icon data={CheckIcon} size={16} />;

Webpack loader

// webpack.config.js
{
    test: /\.svg$/,
    use: ['<loader-name>'],
}

// check.svg
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
    <path d="M13.488 3.43a.75.75 0 0 1 .081 1.058l-6 7a.75.75 0 0 1-1.1.042l-3.5-3.5A.75.75 0 0 1 4.03 6.97l2.928 2.927 5.473-6.385a.75.75 0 0 1 1.057-.081Z" />
</svg>

// ---
import CheckIcon from './check.svg';

<Icon data={CheckIcon} size={16} />;

Properties

NameDescriptionTypeDefault
dataSource of SVG iconIconData
widthwidth SVG attributenumber string
heightheight SVG attributenumber string
sizeBoth width and height SVG attributesnumber string
fillfill SVG attributestring"currentColor"
strokestroke SVG attributestring"none"
classNameCustom CSS class for the root elementstring