# ak-icon
> A react package that contains icons
Latest version **14.0.0** (published 2017-01-19) · SEE LICENSE IN LICENSE license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install ak-icon
pnpm add ak-icon
yarn add ak-icon
bun add ak-icon
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 14.0.0 |
| Published | 2017-01-19 |
| First published | 2016-08-12 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Atlassian Pty Ltd |
| Maintainers | atlassian-aui |
| Keywords | atlaskit, ui |
## Links
- npm: https://www.npmjs.com/package/ak-icon
- Repository: https://bitbucket.org/atlassian/atlaskit
- Homepage: https://bitbucket.org/atlassian/atlaskit#readme
- npm.io page: https://npm.io/package/ak-icon
## Dependencies (3)
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [create-error](https://npm.io/package/create-error.md) ^0.3.1
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.11.6
## Alternatives
- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads
## Recent versions
- 14.0.0 (latest) — 2017-01-19
- 12.2.1 — 2017-01-19
- 12.2.0 — 2017-01-05
- 12.1.3 — 2017-01-03
- 12.1.2 — 2017-01-03
- 12.1.1 — 2016-12-29
- 12.1.0 — 2016-12-23
- 12.0.1 — 2016-12-21
- 12.0.0 — 2016-12-20
- 11.6.1 — 2016-12-20
- 11.6.0 — 2016-12-14
- 11.5.0 — 2016-12-14
- 11.4.2 — 2016-12-13
- 11.4.1 — 2016-12-13
- 11.4.0 — 2016-12-11
- … 64 more at https://npm.io/package/ak-icon/versions
## README
[](http://aui-cdn.atlassian.com/atlaskit/registry/)
[](http://Commitizen.github.io/cz-cli/)
[](https://github.com/semantic-release/semantic-release)
[](https://ecosystem.atlassian.net/browse/AK)
[](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-icon,ak-icon@14.0.0)
# 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.](https://aui-cdn.atlassian.com/atlaskit/stories/ak-icon/14.0.0/)
## Installation
```sh
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
```js
import AkIconHome from 'ak-icon/glyph/home';
ReactDOM.render(, container);
```
## Controlling the icon color
You can control the icon color via CSS:
```html
```
## 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
```js
import * as icons from 'ak-icon';
const { BitbucketLogo } = icons;
ReactDOM.render(, container);
```
Importing a single icon (this will still bundle **all** of the icons in your final bundle if you don't use tree shaking):
```js
import BitbucketLogo from 'ak-icon';
ReactDOM.render(, 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
```sh
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 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
* 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';`|``|
||`import 'ak-icon/glyph/arrowright';`|``|
||`import 'ak-icon/glyph/arrowrightlong';`|``|
||`import 'ak-icon/glyph/atlassian';`|``|
||`import 'ak-icon/glyph/bitbucket/addons';`|``|
||`import 'ak-icon/glyph/bitbucket/admin';`|``|
||`import 'ak-icon/glyph/bitbucket/branches';`|``|
||`import 'ak-icon/glyph/bitbucket/builds';`|``|
||`import 'ak-icon/glyph/bitbucket/commits';`|``|
||`import 'ak-icon/glyph/bitbucket/dashboard';`|``|
||`import 'ak-icon/glyph/bitbucket/downloads';`|``|
||`import 'ak-icon/glyph/bitbucket/followers';`|``|
||`import 'ak-icon/glyph/bitbucket/following';`|``|
||`import 'ak-icon/glyph/bitbucket/issues';`|``|
||`import 'ak-icon/glyph/bitbucket/logo';`|``|
||`import 'ak-icon/glyph/bitbucket/members';`|``|
||`import 'ak-icon/glyph/bitbucket/optout';`|``|
||`import 'ak-icon/glyph/bitbucket/pipelines';`|``|
||`import 'ak-icon/glyph/bitbucket/projects';`|``|
||`import 'ak-icon/glyph/bitbucket/pullrequests';`|``|
||`import 'ak-icon/glyph/bitbucket/repos';`|``|
||`import 'ak-icon/glyph/bitbucket/repositories';`|``|
||`import 'ak-icon/glyph/bitbucket/snippets';`|``|
||`import 'ak-icon/glyph/bitbucket/source';`|``|
||`import 'ak-icon/glyph/bitbucket/teams';`|``|
||`import 'ak-icon/glyph/bitbucket/wiki';`|``|
||`import 'ak-icon/glyph/cancel';`|``|
||`import 'ak-icon/glyph/checkbox';`|``|
||`import 'ak-icon/glyph/confirm';`|``|
||`import 'ak-icon/glyph/confluence/calendar';`|``|
||`import 'ak-icon/glyph/confluence/canvas';`|``|
||`import 'ak-icon/glyph/confluence/page';`|``|
||`import 'ak-icon/glyph/confluence/person';`|``|
||`import 'ak-icon/glyph/confluence/quote';`|``|
||`import 'ak-icon/glyph/create';`|``|
||`import 'ak-icon/glyph/dashboard';`|``|
||`import 'ak-icon/glyph/edit';`|``|
||`import 'ak-icon/glyph/editor/advanced';`|``|
||`import 'ak-icon/glyph/editor/bold';`|``|
||`import 'ak-icon/glyph/editor/code';`|``|
||`import 'ak-icon/glyph/editor/image';`|``|
||`import 'ak-icon/glyph/editor/italic';`|``|
||`import 'ak-icon/glyph/editor/link';`|``|
||`import 'ak-icon/glyph/editor/list/bullet';`|``|
||`import 'ak-icon/glyph/editor/list/number';`|``|
||`import 'ak-icon/glyph/editor/mention';`|``|
||`import 'ak-icon/glyph/editor/open';`|``|
||`import 'ak-icon/glyph/editor/underline';`|``|
||`import 'ak-icon/glyph/editor/unlink';`|``|
||`import 'ak-icon/glyph/emoji/activity';`|``|
||`import 'ak-icon/glyph/emoji/atlassian';`|``|
||`import 'ak-icon/glyph/emoji/custom';`|``|
||`import 'ak-icon/glyph/emoji/flags';`|``|
||`import 'ak-icon/glyph/emoji/food';`|``|
||`import 'ak-icon/glyph/emoji/frequent';`|``|
||`import 'ak-icon/glyph/emoji/nature';`|``|
||`import 'ak-icon/glyph/emoji/objects';`|``|
||`import 'ak-icon/glyph/emoji/people';`|``|
||`import 'ak-icon/glyph/emoji/symbols';`|``|
||`import 'ak-icon/glyph/emoji/travel';`|``|
||`import 'ak-icon/glyph/error';`|``|
||`import 'ak-icon/glyph/expand';`|``|
||`import 'ak-icon/glyph/feedback';`|``|
||`import 'ak-icon/glyph/help';`|``|
||`import 'ak-icon/glyph/home';`|``|
||`import 'ak-icon/glyph/jira/logo';`|``|
||`import 'ak-icon/glyph/location';`|``|
||`import 'ak-icon/glyph/moreoptions';`|``|
||`import 'ak-icon/glyph/projects';`|``|
||`import 'ak-icon/glyph/question';`|``|
||`import 'ak-icon/glyph/radio';`|``|
||`import 'ak-icon/glyph/search';`|``|
||`import 'ak-icon/glyph/settings';`|``|
||`import 'ak-icon/glyph/success';`|``|
||`import 'ak-icon/glyph/time';`|``|
||`import 'ak-icon/glyph/warning';`|``|
## Classes
- Icon
## Icon
**Kind**: global class
* Properties
* [icon.label](#Icon+label) : string
* [icon.size](#Icon+size) : [size](#size)
* [icon.onClick](#Icon+onClick) : function
### 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)
### icon.size : [size](#size)
(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
**Kind**: instance property of [Icon](#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](#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](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-icon,ak-icon@14.0.0).
Check [if someone has already asked the same question before](https://answers.atlassian.com/questions/topics/42926171/atlaskit).
### Create a support ticket
Are you in trouble? [Let us know](https://ecosystem.atlassian.net/browse/AK)!
---
_Source: https://npm.io/package/ak-icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._