Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@navikt/aksel-icons

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@navikt/aksel-icons

800+ open source icons made by Aksel, NAVs designsystem-team


Version published
Maintainers
17
Created

Aksel icons

800+ open source icons made by Aksel, NAVs designsystem-team

  • Designed for 24x24px
  • Available in React and SVG
  • Accessible with use of title-prop
  • Suffixed with Icon

Install

  yarn add @navikt/aksel-icons
  npm install @navikt/aksel-icons

Use

For previous users of @navikt/ds-icons, this package utilizes the same API. The only difference is that the icons are suffixed with Icon to avoid naming conflicts and visual changes to the icons themselves.

import { StarIcon } from "@navikt/aksel-icons";

function App() {
  return <StarIcon title="star" fontSize="1.5rem" />;
}

Tip: Use the title prop for accessible icons.

Sizing

Each icons width and height is default 1em. This allows you to use the native fontSize-prop to adjust sizing. We recommend using at least 1.5rem/24px for best possible visual representation.

<StarIcon fontSize="1.5rem" />

Direct svg-import

All icons are available in raw SVG-format behind /svg. Note that svg-files do not have the suffix Icon.

import StarIcon from "@navikt/aksel-icons/svg/Star.svg";

If using typescript, TS might complain about not finding types related to the svg-format. Add a *.d.ts file with this declaration to fix this. (This was copied from next/image-types/global.d.ts since next solves this internally, but should work elsewhere)

declare module "*.svg" {
  /**
   * Use `any` to avoid conflicts with
   * `@svgr/webpack` plugin or
   * `babel-plugin-inline-react-svg` plugin.
   */
  const content: any;

  export default content;
}

Learn more

License

MIT

FAQs

Package last updated on 13 Dec 2023

Did you know?

Socket

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.

Install

Related posts