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.
Icon
This package contains the AtlasKit icons. All icons should be consumed separately unless your build tool supports tree shaking.
This packages is licensed under the Atlassian Design Guidelines - please check the LICENSE file for more information.
Try it out
Interact with a live demo of the @atlaskit/icon component.
Installation
npm install @atlaskit/icon
Using the component
HTML
The @atlaskit/icon
package exports the Icon React components.
Import the component in your React app as follows:
bundle.js
import AkIconHome from '@atlaskit/icon/glyph/home';
ReactDOM.render(<AkIconHome />, container);
Controlling the icon color
You can control the icon color via CSS:
<span style={{color: 'red'}}>
<AkIconHome />
</span>
Use the bundle (all icons)
This package provides all icons bundled in one export but unless your build tool supports tree shaking, you should import only a single icon instead of the bundled version.
bundle.js
import * as icons from '@atlaskit/icon';
const { BitbucketLogo } = icons;
ReactDOM.render(<BitbucketLogo />, container);
Importing a single icon (this will still bundle all of the icons in your final bundle if you don't use tree shaking):
import BitbucketLogo from '@atlaskit/icon';
ReactDOM.render(<BitbucketLogo />, container);
Adding new icons
Adding new icons is as simple as checking out the AtlasKit repo, adding your SVG file to /packages/icon/src/icons
and running
npm run prepublish
from within the icon
package. This will clean up the SVG and generate a new src/index.jsx
file and update all the stories in storybook to use it.
NOTE: The reduced-ui-pack
package uses the icons from this package, so if you change add or remove any icons then you'll also need to update the tests in reduced-ui-pack.
Some things to look for:
- 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. - Check that the icon appears in the
All icons
story. Look for any clipping or sizing issues here. - Check the
All icons (usage)
story to make sure the naming has worked as expected (paths/namespacing makes sense, etc). - Check the
Icons with broken fills (solid parts)
story to make sure that no parts of your svg have hardcoded colors.
- If any parts of your icon appear to be dark, check the svg file for instances of
fill="XXXXX"
and replace them with fill="currentColor"
.
- Check the
Icons that are too big (red parts)
story to show any parts of the icon that fall outside the 24x24 size that icons should fill. - Make sure you update the test in
icon/test/indexSpec.jsx
to include your icon. - Make sure you use the appropriate commit message when adding or modifying icons
- changing an icon is a patch
- adding an icon is a feature
- removing an icon is breaking change
- renaming an icon is a breaking change
Classes
- Icon
Icon
Kind: global class
new Icon()
Icon interface. All icons follow this structure.
icon.label : string
(Required) The icon label
This is a required attribute.
Omitting it will make the icon inaccessible for screen readers, etc..
The text passed will be sanitized, e.g. passed HTML will be represented
as plain text.
Kind: instance property of Icon
icon.size : size
(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of Icon
Default: small
icon.onClick : function
(Optional) A handler to execute when the icon is clicked.
Defaults to a noop.
Kind: instance property of Icon
size : enum
Icon size values.
Kind: global enum
Properties
Name | Type | Default | Description |
---|
small | string | "small" | small icon |
medium | string | "medium" | medium icon |
large | string | "large" | large icon |
xlarge | string | "xlarge" | xlarge icon |
Support and feedback
We're here to help!
Let us know what you think of our components and docs, your feedback is really important for us.
Ask a question in our forum.
Check if someone has already asked the same question before.
Create a support ticket
Are you in trouble? Let us know!