@atlaskit/icon
Advanced tools
Package description
@atlaskit/icon is a package from Atlassian's Atlaskit design system that provides a collection of icons for use in React applications. It offers a variety of icons that can be easily integrated and customized within your projects.
Basic Icon Usage
This feature allows you to import and use a specific icon from the @atlaskit/icon package. The example demonstrates how to use the AtlassianIcon with a medium size.
import { AtlassianIcon } from '@atlaskit/icon';
const MyComponent = () => (
<div>
<AtlassianIcon size="medium" />
</div>
);Customizing Icon Size
This feature allows you to customize the size of the icon. The example shows how to set the size of the AtlassianIcon to large.
import { AtlassianIcon } from '@atlaskit/icon';
const MyComponent = () => (
<div>
<AtlassianIcon size="large" />
</div>
);Using Different Icons
This feature demonstrates how to use different icons from the @atlaskit/icon package. The example shows the usage of BitbucketIcon and JiraIcon with medium size.
import { BitbucketIcon, JiraIcon } from '@atlaskit/icon';
const MyComponent = () => (
<div>
<BitbucketIcon size="medium" />
<JiraIcon size="medium" />
</div>
);react-icons is a popular package that provides a wide range of icons from various icon libraries such as Font Awesome, Material Design, and more. It offers a similar functionality to @atlaskit/icon but with a broader selection of icons from different sources.
fontawesome is a widely-used icon library that offers a vast collection of icons. It provides both free and pro versions, with the pro version offering additional icons and features. Font Awesome icons can be used in various frameworks and libraries, including React.
Readme
A React package that contains icons.
yarn add @atlaskit/icon
Detailed docs and example usage can be found here.
!!IMPORTANT
The icons package has a custom build process, as it generates its both stripped svgs and glyphs that are committed to the repo, so that they can be accessed as paths when published.
You will manually need to run yarn update:icons from the root repository, or
yarn build from inside the icon folder whenever you make changes to icon.
New Icons should be added to /icon/svgs_raw/ and metadata about the icon added to /icon/src/metadata.ts, followed by the build step. The name of the icon will also need to be added to the expected array in /icon/src/components/__tests__/unit/indexSpec.tsx.
NOTE: The reduced-ui-pack package should contain all the icons we include
in this package. Make sure to rebuild the reduced-ui-pack sprite as outlined in
the README.md file included within that package.
If your icon is used only in a specific context or product, place it in
/icon/src/icons/subfolder and it will be namespaced appropriately.
FAQs
An icon is a visual representation of a command, device, directory, or common action.
The npm package @atlaskit/icon receives a total of 83,565 weekly downloads. As such, @atlaskit/icon popularity was classified as popular.
We found that @atlaskit/icon demonstrated a healthy version release cadence and project activity because the last version was released less than 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
GitHub is combatting a new spam campaign that exploits issues with links to malicious downloads, highlighting the need for better moderation tools to protect open-source maintainers' time and security.
Security News
uv, Python's new package manager, offers a faster and more efficient alternative to pip with features that simplify tooling, manage Python versions, and streamline development workflows.
Research
Security News
Socket researchers have uncovered 3.7 million fake GitHub stars, highlighting a growing threat linked to scams, fraud, and malware, with these campaigns rapidly increasing over the last six months.