@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.

BEFORE YOU CHANGE ICONS

!!IMPORTANT

The icons package has a custom build process, as it generates its both stripped svgs and glyphs that are committed to the repo, so that they can be accessed as paths when published.

You will manually need to run yarn update:icons from the root repository, or yarn build from inside the icon folder whenever you make changes to icon.

New Icons should be added to /icon/svgs_raw/ and metadata about the icon added to /icon/src/metadata.ts, followed by the build step. The name of the icon will also need to be added to the expected array in /icon/src/components/__tests__/unit/indexSpec.tsx.

NOTE: The reduced-ui-pack package should contain all the icons we include in this package. Make sure to rebuild the reduced-ui-pack sprite as outlined in the README.md file included within that package.

If your icon is used only in a specific context or product, place it in /icon/src/icons/subfolder and it will be namespaced appropriately.