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 ak-icon component.Installation
npm install ak-icon
Using the component
HTML
Theak-icon
package exports the Icon React components.Import the component in your React app as follows:
bundle.js
import AkIconHome from 'ak-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 'ak-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 'ak-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/ak-icon/src/icons
and runningnpm run prepublish
from within the
ak-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.Some things to look for:
- If your icon is used only in a specific context or product, place it in
/ak-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.
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 20x20 size that icons should fill. - Make sure you update the test in
ak-icon/test/indexSpec.jsx
to include your icon. - Make sure you use the appropriate commit message when adding or modifying icons
Icons
These are the icons that are currently bundled inak-icon
.|Icon|Import|Webcomponent| |----|------|------------| ||
import 'ak-icon/glyph/arrowleft';
|<ak-icon-arrowleft />
|
||import 'ak-icon/glyph/arrowright';
|<ak-icon-arrowright />
|
||import 'ak-icon/glyph/arrowrightlong';
|<ak-icon-arrowrightlong />
|
||import 'ak-icon/glyph/atlassian';
|<ak-icon-atlassian />
|
||import 'ak-icon/glyph/bitbucket/addons';
|<ak-icon-bitbucket-addons />
|
||import 'ak-icon/glyph/bitbucket/admin';
|<ak-icon-bitbucket-admin />
|
||import 'ak-icon/glyph/bitbucket/branches';
|<ak-icon-bitbucket-branches />
|
||import 'ak-icon/glyph/bitbucket/builds';
|<ak-icon-bitbucket-builds />
|
||import 'ak-icon/glyph/bitbucket/commits';
|<ak-icon-bitbucket-commits />
|
||import 'ak-icon/glyph/bitbucket/dashboard';
|<ak-icon-bitbucket-dashboard />
|
||import 'ak-icon/glyph/bitbucket/downloads';
|<ak-icon-bitbucket-downloads />
|
||import 'ak-icon/glyph/bitbucket/followers';
|<ak-icon-bitbucket-followers />
|
||import 'ak-icon/glyph/bitbucket/following';
|<ak-icon-bitbucket-following />
|
||import 'ak-icon/glyph/bitbucket/issues';
|<ak-icon-bitbucket-issues />
|
||import 'ak-icon/glyph/bitbucket/logo';
|<ak-icon-bitbucket-logo />
|
||import 'ak-icon/glyph/bitbucket/members';
|<ak-icon-bitbucket-members />
|
||import 'ak-icon/glyph/bitbucket/optout';
|<ak-icon-bitbucket-optout />
|
||import 'ak-icon/glyph/bitbucket/pipelines';
|<ak-icon-bitbucket-pipelines />
|
||import 'ak-icon/glyph/bitbucket/projects';
|<ak-icon-bitbucket-projects />
|
||import 'ak-icon/glyph/bitbucket/pullrequests';
|<ak-icon-bitbucket-pullrequests />
|
||import 'ak-icon/glyph/bitbucket/repos';
|<ak-icon-bitbucket-repos />
|
||import 'ak-icon/glyph/bitbucket/repositories';
|<ak-icon-bitbucket-repositories />
|
||import 'ak-icon/glyph/bitbucket/snippets';
|<ak-icon-bitbucket-snippets />
|
||import 'ak-icon/glyph/bitbucket/source';
|<ak-icon-bitbucket-source />
|
||import 'ak-icon/glyph/bitbucket/teams';
|<ak-icon-bitbucket-teams />
|
||import 'ak-icon/glyph/bitbucket/wiki';
|<ak-icon-bitbucket-wiki />
|
||import 'ak-icon/glyph/cancel';
|<ak-icon-cancel />
|
||import 'ak-icon/glyph/checkbox';
|<ak-icon-checkbox />
|
||import 'ak-icon/glyph/confirm';
|<ak-icon-confirm />
|
||import 'ak-icon/glyph/confluence/calendar';
|<ak-icon-confluence-calendar />
|
||import 'ak-icon/glyph/confluence/canvas';
|<ak-icon-confluence-canvas />
|
||import 'ak-icon/glyph/confluence/page';
|<ak-icon-confluence-page />
|
||import 'ak-icon/glyph/confluence/person';
|<ak-icon-confluence-person />
|
||import 'ak-icon/glyph/confluence/quote';
|<ak-icon-confluence-quote />
|
||import 'ak-icon/glyph/create';
|<ak-icon-create />
|
||import 'ak-icon/glyph/dashboard';
|<ak-icon-dashboard />
|
||import 'ak-icon/glyph/edit';
|<ak-icon-edit />
|
||import 'ak-icon/glyph/editor/advanced';
|<ak-icon-editor-advanced />
|
||import 'ak-icon/glyph/editor/bold';
|<ak-icon-editor-bold />
|
||import 'ak-icon/glyph/editor/code';
|<ak-icon-editor-code />
|
||import 'ak-icon/glyph/editor/image';
|<ak-icon-editor-image />
|
||import 'ak-icon/glyph/editor/italic';
|<ak-icon-editor-italic />
|
||import 'ak-icon/glyph/editor/link';
|<ak-icon-editor-link />
|
||import 'ak-icon/glyph/editor/list/bullet';
|<ak-icon-editor-list-bullet />
|
||import 'ak-icon/glyph/editor/list/number';
|<ak-icon-editor-list-number />
|
||import 'ak-icon/glyph/editor/mention';
|<ak-icon-editor-mention />
|
||import 'ak-icon/glyph/editor/open';
|<ak-icon-editor-open />
|
||import 'ak-icon/glyph/editor/underline';
|<ak-icon-editor-underline />
|
||import 'ak-icon/glyph/editor/unlink';
|<ak-icon-editor-unlink />
|
||import 'ak-icon/glyph/emoji/activity';
|<ak-icon-emoji-activity />
|
||import 'ak-icon/glyph/emoji/atlassian';
|<ak-icon-emoji-atlassian />
|
||import 'ak-icon/glyph/emoji/custom';
|<ak-icon-emoji-custom />
|
||import 'ak-icon/glyph/emoji/flags';
|<ak-icon-emoji-flags />
|
||import 'ak-icon/glyph/emoji/food';
|<ak-icon-emoji-food />
|
||import 'ak-icon/glyph/emoji/frequent';
|<ak-icon-emoji-frequent />
|
||import 'ak-icon/glyph/emoji/nature';
|<ak-icon-emoji-nature />
|
||import 'ak-icon/glyph/emoji/objects';
|<ak-icon-emoji-objects />
|
||import 'ak-icon/glyph/emoji/people';
|<ak-icon-emoji-people />
|
||import 'ak-icon/glyph/emoji/symbols';
|<ak-icon-emoji-symbols />
|
||import 'ak-icon/glyph/emoji/travel';
|<ak-icon-emoji-travel />
|
||import 'ak-icon/glyph/error';
|<ak-icon-error />
|
||import 'ak-icon/glyph/expand';
|<ak-icon-expand />
|
||import 'ak-icon/glyph/feedback';
|<ak-icon-feedback />
|
||import 'ak-icon/glyph/help';
|<ak-icon-help />
|
||import 'ak-icon/glyph/home';
|<ak-icon-home />
|
||import 'ak-icon/glyph/jira/logo';
|<ak-icon-jira-logo />
|
||import 'ak-icon/glyph/location';
|<ak-icon-location />
|
||import 'ak-icon/glyph/moreoptions';
|<ak-icon-moreoptions />
|
||import 'ak-icon/glyph/projects';
|<ak-icon-projects />
|
||import 'ak-icon/glyph/question';
|<ak-icon-question />
|
||import 'ak-icon/glyph/radio';
|<ak-icon-radio />
|
||import 'ak-icon/glyph/search';
|<ak-icon-search />
|
||import 'ak-icon/glyph/settings';
|<ak-icon-settings />
|
||import 'ak-icon/glyph/success';
|<ak-icon-success />
|
||import 'ak-icon/glyph/time';
|<ak-icon-time />
|
||import 'ak-icon/glyph/warning';
|<ak-icon-warning />
|Classes
Icon
Kind: global class- Properties
* [icon.label](#Icon+label) : <code>string</code>
* [icon.size](#Icon+size) : <code>[size](#size)</code>
* [icon.onClick](#Icon+onClick) : <code>function</code>
new Icon()
Icon interface. All icons follow this structure.icon.label : string
(Required) The icon labelThis 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.Community support
Ask a question in our forum.Check if someone has already asked the same question before.