2.5.0 • Published 1 week ago

jb-icons

Licence

MIT

Version

2.5.0

Deps

Size

680 kB

Vulns

Weekly

Summary Dependency Versions

jb-icon

jb-icon-expand and jb-icon-refresh emit a non-bubbling init event when connection setup finishes. Register listeners before inserting the element into the document.

GitHub Created At

Icon component for the JB Design System. jb-icon has no default export. it has some sub folder each contain one icon.

Every icon extends the SSR-safe JBBaseComponent, and custom-element registration is guarded. Icon submodules can therefore be imported while rendering in Node.js environments such as Next.js or Astro without requiring HTMLElement, window, or customElements. Their shadow DOM and animations initialize only when the elements are upgraded in a browser.

Demo

React JSX types

React applications can opt in to JSX declarations for every icon with one type-only helper import. Continue importing each icon separately so only the icons used by the application are registered and bundled. See the React JSX demo.

import "jb-icons/react";
import "jb-icons/triangle";

export function DisclosureIcon({ isOpen }: { isOpen: boolean }) {
  return <jb-icon-triangle direction="inline-end" spin={isOpen ? 90 : 0} round={60} size="xs" />;
}

The jb-icons/react runtime entry is empty. Non-React projects do not need to import it and do not resolve any React types.

The declaration includes the shared size, color, class, standard HTML, ARIA, children, and ref props. It also exposes each icon's public properties:

Icons	Additional React JSX props
`arrow`	`direction`, `spin`, `end-line`
`arrow-tailed`	`direction`, `spin`, `long`
`triangle`	`direction`, `spin`, `round`
`delete`	`isOpen`
`edit`	`isActive`, `active`
`expand`	`isExpanded`, `expanded`
`eye`	`open`
`refresh`, `search`	`isLoading`

Remove any application-local declarations for the same jb-icon-* JSX elements after opting in, because duplicate declarations with different types can conflict.

Size and variants

Every icon supports a size attribute and property. Sizes set only the icon height; width remains automatic and follows the SVG's aspect ratio.

The shared size rules live in style/variables.css and are injected into every icon component before its icon-specific styles. The resolved height is available as the --icon-size custom property. Compare the available sizes in the sizes demo.

Size	Default height	CSS custom property
`xs`	1rem (16px)	`--jb-icon-size-xs`
`sm`	1.25rem (20px)	`--jb-icon-size-sm`
`md`	1.5rem (24px)	`--jb-icon-size-md`
`lg`	1.75rem (28px)	`--jb-icon-size-lg`
`xl`	2.25rem (36px)	`--jb-icon-size-xl`

md is the default when size is omitted. Its no-attribute size can be customized with --jb-icon-size; an explicit size="md" uses --jb-icon-size-md.

<jb-icon-search></jb-icon-search>
<jb-icon-search size="sm"></jb-icon-search>
<jb-icon-search size="xl"></jb-icon-search>

Override one or more size tokens from an application stylesheet:

:root {
  --jb-icon-size: 1.5rem;
  --jb-icon-size-xs: 0.875rem;
  --jb-icon-size-sm: 1.125rem;
  --jb-icon-size-md: 1.5rem;
  --jb-icon-size-lg: 2rem;
  --jb-icon-size-xl: 2.5rem;
}

--icon-size is internal to each icon and contains the resolved height. Prefer the public --jb-icon-size* properties when customizing icons.

Stroke width

Stroked icons use the shared 1024-unit weight scale from style/variables.css; the stroke-width demo shows the three weights side by side.

Weight	SVG units	Internal custom property
Thin detail	48	`--icon-stroke-width-thin`
Standard outline	64	`--icon-stroke-width`
Thick emphasis	96	`--icon-stroke-width-thick`

Use the standard weight for primary outlines. Thin and thick weights are reserved for secondary details and intentional visual emphasis.

Color

Icons inherit the surrounding text color by default through currentColor. See every theme variant in the colors demo:

<div style="color: rebeccapurple">
  <jb-icon-search></jb-icon-search>
</div>

Use the shared --jb-icon-color custom property to customize all JB icons in a scope:

:root {
  --jb-icon-color: #334155;
}

Icons also support these color attribute variants:

Color	Theme fallback	CSS custom property
`primary`	`--jb-primary`	`--jb-icon-color-primary`
`secondary`	`--jb-secondary`	`--jb-icon-color-secondary`
`positive`	`--jb-green`	`--jb-icon-color-positive`
`danger`	`--jb-red`	`--jb-icon-color-danger`
`warning`	`--jb-yellow`	`--jb-icon-color-warning`
`light`	`--jb-neutral-10`	`--jb-icon-color-light`
`dark`	`--jb-neutral`	`--jb-icon-color-dark`

<jb-icon-search color="primary"></jb-icon-search>
<jb-icon-search color="danger"></jb-icon-search>

Each variant first uses its --jb-icon-color-* property, then its corresponding JB theme color, and finally currentColor. Without a color attribute, the icon uses --jb-icon-color and falls back directly to currentColor.

Icons

Plus and minus icons

Import the number control icons from their submodules:

import "jb-icons/plus";
import "jb-icons/minus";

Both icons use the standard 1024-unit view box, stroke weight, size variants, and color variants:

<jb-icon-plus size="sm" color="positive"></jb-icon-plus>
<jb-icon-minus size="sm" color="danger"></jb-icon-minus>

Arrow-tailed icon

The gallery demo shows the short and long tail alongside every supported direction.

Import the tailed arrow from its submodule:

import "jb-icons/arrow-tailed";

The default arrow has a short tail and square visual bounds. Add the boolean long attribute, or set its property, to use the full-height tail:

<jb-icon-arrow-tailed></jb-icon-arrow-tailed>
<jb-icon-arrow-tailed long></jb-icon-arrow-tailed>

const arrow = document.querySelector("jb-icon-arrow-tailed");
arrow.long = true;

Lorgnette icon

The gallery demo includes the lorgnette with the shared size and color variants.

Import the lorgnette icon from its submodule:

import "jb-icons/lorgnette";

Use the shared size and color variants. Its lens highlights use the complementary icon color:

<jb-icon-lorgnette></jb-icon-lorgnette>
<jb-icon-lorgnette size="sm" color="primary"></jb-icon-lorgnette>

jb-icon-lorgnette {
  --jb-icon-color-complementary: #ff1229;
}

Expand icon

Try its expanded and collapsed states in the animation demo.

Import the expand icon from its submodule:

import "jb-icons/expand";

Set isExpanded to animate between the expand and collapse states:

const expandIcon = document.querySelector("jb-icon-expand");
expandIcon.isExpanded = true;

Edit icon

Try its active and resting states in the animation demo.

Import the edit icon from its submodule:

import "jb-icons/edit";

The pen uses the standard icon color, while its animated underline uses the complementary icon color:

<jb-icon-edit></jb-icon-edit>
<jb-icon-edit size="sm" color="primary"></jb-icon-edit>

Customize the underline with --jb-icon-color-complementary:

jb-icon-edit {
  --jb-icon-color-complementary: #ff1229;
}

Set isActive to animate between the resting and active edit states:

const editIcon = document.querySelector("jb-icon-edit");
editIcon.isActive = true;

Delete icon

Try its open and closed lid states in the animation demo.

Import the delete icon from its submodule:

import "jb-icons/delete";

Use the shared size and color variants on <jb-icon-delete>:

<jb-icon-delete></jb-icon-delete>
<jb-icon-delete size="sm" color="danger"></jb-icon-delete>

Set isOpen to animate the bin lid between its open and closed states. The animation is triggered programmatically and is not tied to hover:

const deleteIcon = document.querySelector("jb-icon-delete");
deleteIcon.isOpen = true;

// Close it again:
deleteIcon.isOpen = false;

The playOpenAnimation() and playCloseAnimation() methods remain available and keep isOpen synchronized.

Refresh icon

Try its loading state in the animation demo.

Import the refresh icon from its submodule:

import "jb-icons/refresh";

<jb-icon-refresh></jb-icon-refresh>
<jb-icon-refresh size="sm" color="primary"></jb-icon-refresh>

Set isLoading to true to start rotating the icon. Setting it back to false does not interrupt the active rotation; the icon finishes that cycle and then stops repeating:

const refreshIcon = document.querySelector("jb-icon-refresh");
refreshIcon.isLoading = true;

// When refreshing finishes:
refreshIcon.isLoading = false;

Search icon

Try its loading state in the animation demo.

Import the search icon from its submodule:

import "jb-icons/search";

Use the shared size and color variants on <jb-icon-search>:

<jb-icon-search></jb-icon-search>
<jb-icon-search size="sm" color="primary"></jb-icon-search>

Set the isLoading property to animate the search icon while a search is in progress. Reset it to false to finish the animation and return to the search shape:

const searchIcon = document.querySelector("jb-icon-search");
searchIcon.isLoading = true;

// When the search finishes:
searchIcon.isLoading = false;

Eye icon

Try its open and closed states in the animation demo.

Import the eye icon from its submodule and use the open attribute or property to switch between hidden and visible states:

import "jb-icons/eye";

<jb-icon-eye></jb-icon-eye>
<jb-icon-eye open></jb-icon-eye>

const eye = document.querySelector("jb-icon-eye");
eye.open = true;

See the React JSX documentation for typed JSX usage.
See the jb-icons/react README for React-specific guidance.
See All JB Design System Component List for more components.
Use Contribution Guide if you want to contribute to this component.

AI agent notes

Import jb-icons/icon-name once before using <jb-icon-name>.

Keywords

icon pack web-component