@atlaskit/icon

What is @atlaskit/icon?

@atlaskit/icon is a package from Atlassian's Atlaskit design system that provides a collection of icons for use in React applications. It offers a variety of icons that can be easily integrated and customized within your projects.

What are @atlaskit/icon's main functionalities?

Basic Icon Usage

This feature allows you to import and use a specific icon from the @atlaskit/icon package. The example demonstrates how to use the AtlassianIcon with a medium size.

import { AtlassianIcon } from '@atlaskit/icon';

const MyComponent = () => (
  <div>
    <AtlassianIcon size="medium" />
  </div>
);

Customizing Icon Size

This feature allows you to customize the size of the icon. The example shows how to set the size of the AtlassianIcon to large.

import { AtlassianIcon } from '@atlaskit/icon';

const MyComponent = () => (
  <div>
    <AtlassianIcon size="large" />
  </div>
);

Using Different Icons

This feature demonstrates how to use different icons from the @atlaskit/icon package. The example shows the usage of BitbucketIcon and JiraIcon with medium size.

import { BitbucketIcon, JiraIcon } from '@atlaskit/icon';

const MyComponent = () => (
  <div>
    <BitbucketIcon size="medium" />
    <JiraIcon size="medium" />
  </div>
);

Other packages similar to @atlaskit/icon

react-icons

react-icons is a popular package that provides a wide range of icons from various icon libraries such as Font Awesome, Material Design, and more. It offers a similar functionality to @atlaskit/icon but with a broader selection of icons from different sources.

fontawesome

fontawesome is a widely-used icon library that offers a vast collection of icons. It provides both free and pro versions, with the pro version offering additional icons and features. Font Awesome icons can be used in various frameworks and libraries, including React.

README

Icon

A React package that contains icons.

Installation

yarn add @atlaskit/icon

Usage

Detailed docs and example usage can be found here. For adding a new icon to the icon set please follow the adding new icons documentation.