Not Parents' Money

    This package has been deprecated

    Author message:

    This package has been deprecated. Please use the '@atlaskit' scoped packages instead. See https://atlaskit.atlassian.com for more information

    ak-icon

    14.0.0 • Public • Published

    AtlasKit component registry Commitizen friendly semantic-release Report an issue Ask in our forum

    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.

    Example icon

    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 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
    "arrowleft" import 'ak-icon/glyph/arrowleft'; <ak-icon-arrowleft />
    "arrowright" import 'ak-icon/glyph/arrowright'; <ak-icon-arrowright />
    "arrowrightlong" import 'ak-icon/glyph/arrowrightlong'; <ak-icon-arrowrightlong />
    "atlassian" import 'ak-icon/glyph/atlassian'; <ak-icon-atlassian />
    "bitbucket/addons" import 'ak-icon/glyph/bitbucket/addons'; <ak-icon-bitbucket-addons />
    "bitbucket/admin" import 'ak-icon/glyph/bitbucket/admin'; <ak-icon-bitbucket-admin />
    "bitbucket/branches" import 'ak-icon/glyph/bitbucket/branches'; <ak-icon-bitbucket-branches />
    "bitbucket/builds" import 'ak-icon/glyph/bitbucket/builds'; <ak-icon-bitbucket-builds />
    "bitbucket/commits" import 'ak-icon/glyph/bitbucket/commits'; <ak-icon-bitbucket-commits />
    "bitbucket/dashboard" import 'ak-icon/glyph/bitbucket/dashboard'; <ak-icon-bitbucket-dashboard />
    "bitbucket/downloads" import 'ak-icon/glyph/bitbucket/downloads'; <ak-icon-bitbucket-downloads />
    "bitbucket/followers" import 'ak-icon/glyph/bitbucket/followers'; <ak-icon-bitbucket-followers />
    "bitbucket/following" import 'ak-icon/glyph/bitbucket/following'; <ak-icon-bitbucket-following />
    "bitbucket/issues" import 'ak-icon/glyph/bitbucket/issues'; <ak-icon-bitbucket-issues />
    "bitbucket/logo" import 'ak-icon/glyph/bitbucket/logo'; <ak-icon-bitbucket-logo />
    "bitbucket/members" import 'ak-icon/glyph/bitbucket/members'; <ak-icon-bitbucket-members />
    "bitbucket/optout" import 'ak-icon/glyph/bitbucket/optout'; <ak-icon-bitbucket-optout />
    "bitbucket/pipelines" import 'ak-icon/glyph/bitbucket/pipelines'; <ak-icon-bitbucket-pipelines />
    "bitbucket/projects" import 'ak-icon/glyph/bitbucket/projects'; <ak-icon-bitbucket-projects />
    "bitbucket/pullrequests" import 'ak-icon/glyph/bitbucket/pullrequests'; <ak-icon-bitbucket-pullrequests />
    "bitbucket/repos" import 'ak-icon/glyph/bitbucket/repos'; <ak-icon-bitbucket-repos />
    "bitbucket/repositories" import 'ak-icon/glyph/bitbucket/repositories'; <ak-icon-bitbucket-repositories />
    "bitbucket/snippets" import 'ak-icon/glyph/bitbucket/snippets'; <ak-icon-bitbucket-snippets />
    "bitbucket/source" import 'ak-icon/glyph/bitbucket/source'; <ak-icon-bitbucket-source />
    "bitbucket/teams" import 'ak-icon/glyph/bitbucket/teams'; <ak-icon-bitbucket-teams />
    "bitbucket/wiki" import 'ak-icon/glyph/bitbucket/wiki'; <ak-icon-bitbucket-wiki />
    "cancel" import 'ak-icon/glyph/cancel'; <ak-icon-cancel />
    "checkbox" import 'ak-icon/glyph/checkbox'; <ak-icon-checkbox />
    "confirm" import 'ak-icon/glyph/confirm'; <ak-icon-confirm />
    "confluence/calendar" import 'ak-icon/glyph/confluence/calendar'; <ak-icon-confluence-calendar />
    "confluence/canvas" import 'ak-icon/glyph/confluence/canvas'; <ak-icon-confluence-canvas />
    "confluence/page" import 'ak-icon/glyph/confluence/page'; <ak-icon-confluence-page />
    "confluence/person" import 'ak-icon/glyph/confluence/person'; <ak-icon-confluence-person />
    "confluence/quote" import 'ak-icon/glyph/confluence/quote'; <ak-icon-confluence-quote />
    "create" import 'ak-icon/glyph/create'; <ak-icon-create />
    "dashboard" import 'ak-icon/glyph/dashboard'; <ak-icon-dashboard />
    "edit" import 'ak-icon/glyph/edit'; <ak-icon-edit />
    "editor/advanced" import 'ak-icon/glyph/editor/advanced'; <ak-icon-editor-advanced />
    "editor/bold" import 'ak-icon/glyph/editor/bold'; <ak-icon-editor-bold />
    "editor/code" import 'ak-icon/glyph/editor/code'; <ak-icon-editor-code />
    "editor/image" import 'ak-icon/glyph/editor/image'; <ak-icon-editor-image />
    "editor/italic" import 'ak-icon/glyph/editor/italic'; <ak-icon-editor-italic />
    "editor/link" import 'ak-icon/glyph/editor/link'; <ak-icon-editor-link />
    "editor/list/bullet" import 'ak-icon/glyph/editor/list/bullet'; <ak-icon-editor-list-bullet />
    "editor/list/number" import 'ak-icon/glyph/editor/list/number'; <ak-icon-editor-list-number />
    "editor/mention" import 'ak-icon/glyph/editor/mention'; <ak-icon-editor-mention />
    "editor/open" import 'ak-icon/glyph/editor/open'; <ak-icon-editor-open />
    "editor/underline" import 'ak-icon/glyph/editor/underline'; <ak-icon-editor-underline />
    "editor/unlink" import 'ak-icon/glyph/editor/unlink'; <ak-icon-editor-unlink />
    "emoji/activity" import 'ak-icon/glyph/emoji/activity'; <ak-icon-emoji-activity />
    "emoji/atlassian" import 'ak-icon/glyph/emoji/atlassian'; <ak-icon-emoji-atlassian />
    "emoji/custom" import 'ak-icon/glyph/emoji/custom'; <ak-icon-emoji-custom />
    "emoji/flags" import 'ak-icon/glyph/emoji/flags'; <ak-icon-emoji-flags />
    "emoji/food" import 'ak-icon/glyph/emoji/food'; <ak-icon-emoji-food />
    "emoji/frequent" import 'ak-icon/glyph/emoji/frequent'; <ak-icon-emoji-frequent />
    "emoji/nature" import 'ak-icon/glyph/emoji/nature'; <ak-icon-emoji-nature />
    "emoji/objects" import 'ak-icon/glyph/emoji/objects'; <ak-icon-emoji-objects />
    "emoji/people" import 'ak-icon/glyph/emoji/people'; <ak-icon-emoji-people />
    "emoji/symbols" import 'ak-icon/glyph/emoji/symbols'; <ak-icon-emoji-symbols />
    "emoji/travel" import 'ak-icon/glyph/emoji/travel'; <ak-icon-emoji-travel />
    "error" import 'ak-icon/glyph/error'; <ak-icon-error />
    "expand" import 'ak-icon/glyph/expand'; <ak-icon-expand />
    "feedback" import 'ak-icon/glyph/feedback'; <ak-icon-feedback />
    "help" import 'ak-icon/glyph/help'; <ak-icon-help />
    "home" import 'ak-icon/glyph/home'; <ak-icon-home />
    "jira/logo" import 'ak-icon/glyph/jira/logo'; <ak-icon-jira-logo />
    "location" import 'ak-icon/glyph/location'; <ak-icon-location />
    "moreoptions" import 'ak-icon/glyph/moreoptions'; <ak-icon-moreoptions />
    "projects" import 'ak-icon/glyph/projects'; <ak-icon-projects />
    "question" import 'ak-icon/glyph/question'; <ak-icon-question />
    "radio" import 'ak-icon/glyph/radio'; <ak-icon-radio />
    "search" import 'ak-icon/glyph/search'; <ak-icon-search />
    "settings" import 'ak-icon/glyph/settings'; <ak-icon-settings />
    "success" import 'ak-icon/glyph/success'; <ak-icon-success />
    "time" import 'ak-icon/glyph/time'; <ak-icon-time />
    "warning" import 'ak-icon/glyph/warning'; <ak-icon-warning />

    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.

    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!

    Keywords

    Install

    npm i ak-icon

    DownloadsWeekly Downloads

    165

    Version

    14.0.0

    License

    SEE LICENSE IN LICENSE

    Last publish

    Collaborators

    • atlassian-aui