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.
Interact with a live demo of the ak-icon component.
npm install ak-icon
The ak-icon package exports the Icon Skate components.
Import the component in your JS resource:
import 'ak-icon/glyph/home';
Now you can use the defined tag in your HTML markup:
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<!-- ... -->
<ak-icon-home></ak-icon-home>
</body>
</html>
You can also use it from within another JavaScript resource:
import BitbucketLogo from 'ak-icon/glyph/bitbucket/logo';
const component = new BitbucketLogo();
document.body.appendChild(component);
You can control the icon color via CSS:
<span style="color: red;">
<ak-icon-home></ak-icon-home>
</span>
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.
import * as icons from 'ak-icon';
const { BitbucketLogo } = icons;
// old-school
const icon = new BitbucketLogo();
document.body.appendChild(icon);
// or JSX
const x = (<BitbucketLogo />);
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';
// old-school
const icon = new BitbucketLogo();
document.body.appendChild(icon);
// or JSX
const x = (<BitbucketLogo />);
<!-- ... -->
<ak-icon-home></ak-icon-home>
<ak-icon-bitbucket-logo></ak-icon-bitbucket-logo>
This should only be used for prototyping. Keep in mind that this will pull in all icons, not only the ones you use.
This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.
import HomeIcon from 'ak-icon/glyph/home';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(HomeIcon, {});
ReactDOM.render(<ReactComponent />, container);
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.js file and update all the stories in storybook to use it.
Some things to look for:
/ak-icon/src/icons/subfolder and it will be namespaced appropriately.All icons story. Look for any clipping or sizing issues here.All icons (usage) story to make sure the naming has worked as expected (paths/namespacing makes sense, etc).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".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.ak-icon/test/index.js to include your icon.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/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/checkbox'; | <ak-icon-checkbox /> |
 | 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/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/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/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 /> |
Kind: global class
Properties
stringsizeMethods
Icon interface. All icons follow this structure.
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
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of Icon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
enumIcon 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 |
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.
Are you in trouble? Let us know!
FAQs
A react package that contains icons
The npm package ak-icon receives a total of 549 weekly downloads. As such, ak-icon popularity was classified as not popular.
We found that ak-icon demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.