ak-icon
v14.0.0Icon
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
The ak-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 running
npm 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.- If any parts of your icon appear to be dark, check the svg file for instances of
fill="XXXXX"
and replace them withfill="currentColor"
.
- If any parts of your icon appear to be dark, check the svg file for instances of
- 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
- 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
Icons
These are the icons that are currently bundled in ak-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 :
string
- icon.size :
size
- icon.onClick :
function
- icon.label :
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.
Community support
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!
Metadata
- SEE LICENSE IN LICENSE
- Whatever
- Atlassian Pty Ltd
- released 1/19/2017