@itwin/itwinui-icons

Icons for the Kiwi design system. Each icon is available as an SVG symbol sprite and contains multiple resolutions of the same icon using <symbol> elements. This allows the icon to be used at different sizes with increasing detail and quality. Currently supported symbols as identified by their id attribute values are: icon, icon-large.

Usage

Preferred usage is with the Icon component from @itwin/itwinui-react:

1. Import the icon you want to use.

   Using the import.meta feature to get the URL of the icon (does not work with SSR):

   const placeholderIcon = new URL("@itwin/itwinui-icons/placeholder.svg", import.meta.url).href;

   Or a static import:

   import placeholderIcon from "@itwin/itwinui-icons/placeholder.svg";

2. Render the Icon component.

   import { Icon } from "@itwin/itwinui-react";
   
   <Icon href={placeholderIcon} />
   
   // Specify `size` prop to render the large icon:
   <Icon href={placeholderIcon} size="large" />

   Alternatively, you can use the SVG sprite directly:

   <svg>
       <use href={`${placeholderIcon}#icon`}>
   </svg>
   
   // To display the large icon:
   <svg>
       <use href={`${placeholderIcon}#icon-large`}>
   </svg>

[!IMPORTANT] Icons of @itwin/itwinui-icons should always be used as external resources. Do not inline the SVG content directly in your HTML or React components.

Bundler configuration

Vite

Within your Vite configuration file, you will need to configure assetsInlineLimit option to ensure SVG icons from @itwin/itwinui-icons are not inlined:

defineConfig({
    build: {
        assetsInlineLimit: (filePath) => {
            if (filePath.includes("@itwin/itwinui-icons/")) return false;
            return undefined;
        },
    },
});

Contributing

Are you interested in helping kiwi grow and expand? You can submit feature requests or bugs by creating issues.

If you're interested in contributing code, please read CONTRIBUTING.md for more information.