Icon

Displays an icon.

Icon

Example

<div id="some-icons">
  <span id="icon-container"></span>
  <span id="icon-search"></span>
  <span id="icon-16-pencil"></span>
  <span id="icon-14-pencil"></span>
  <span id="icon-custom-permission"></span>
</div>

:global(.ring-icon) {
  margin: 8px;
  padding: 8px;
}

import React from 'react';
import {render} from 'react-dom';
import {
  SearchIcon,
  CheckmarkIcon,
  PencilIcon,
  PermissionIcon
} from '@jetbrains/ring-ui/components/icon';

render(
  <CheckmarkIcon
    className="additional-class ring-icon"
    color={CheckmarkIcon.Color.MAGENTA}
    size={CheckmarkIcon.Size.Size32}
  />,
  document.getElementById('icon-container')
);

render(
  <SearchIcon
    className="ring-icon"
    size={SearchIcon.Size.Size32}
  />,
  document.getElementById('icon-search')
);

render(
  <PencilIcon
    className="ring-icon"
    size={PencilIcon.Size.Size16}
  />,
  document.getElementById('icon-16-pencil')
);

render(
  <PencilIcon
    className="ring-icon"
    size={PencilIcon.Size.Size14}
  />,
  document.getElementById('icon-14-pencil')
);

render(
  <PermissionIcon
    className="ring-icon"
    height={80}
    width={100}
  />,
  document.getElementById('icon-custom-permission')
);

Icons list

Example

<h3>All available icons are listed below. Place the cursor over an icon to
  see its name.</h3>
<div id="all-icons"></div>

@value unit from '../global/global.css';

:global(.icon-example__container) {
  margin-left: calc(0 - calc(unit * 2));
}

:global(.ring-icon) {
  margin: 8px;
  padding: 8px;
  color: var(--ring-link-color);
}

:global(.secondary) {
  fill: var(--ring-link-hover-color);
}

import React from 'react';
import {render} from 'react-dom';

import * as icons from '@jetbrains/ring-ui/components/icon/icons';

render(
  <div className="icon-example__container">
    {Object.values(icons).map(Icon => (
      <Icon
        key={Icon}
        title={Icon.displayName}
        className="ring-icon"
      />
    ))}
  </div>,
  document.getElementById('all-icons')
);

List of JetBrains product logos

Example

<div id="logos"></div>

:global(.ring-icon) {
  color: black;
  margin: 8px;
  padding: 8px;
}

import React from 'react';
import {render} from 'react-dom';

import * as logos from '@jetbrains/ring-ui/components/icon/logos';

render(
  <div>
    {Object.values(logos).map(Logo => (
      <Logo
        key={Logo}
        title={Logo.displayName}
        size={Logo.Size.Size128}
        className="ring-icon"
      />
    ))}
  </div>,
  document.getElementById('logos')
);