@stratakit/icons

Standalone .svg icons for StrataKit.

Each icon is available as an SVG containing 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

These symbols can be accessed by appending a hash (e.g. #icon, #icon-large) to the .svg URL.

Installation

Using your package manager of choice, install the latest version of @stratakit/icons.

npm add @stratakit/icons

[!NOTE]

As @stratakit/icons requires bundler configuration, consider making it a peer dependency if you're building a package that uses @stratakit/icons.

Usage

Preferred usage is with the Icon component from @stratakit/foundations:

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("@stratakit/icons/placeholder.svg", import.meta.url).href;

   Or a static import:

   import placeholderIcon from "@stratakit/icons/placeholder.svg";

2. Render the Icon component from @stratakit/foundations.

   import { Icon } from "@stratakit/foundations";
   
   <Icon href={placeholderIcon} />;

   An optional hash can be specified to select a specific symbol from the .svg:

   <Icon href={`${placeholderIcon}#icon`} />
   <Icon href={`${placeholderIcon}#icon-large`} size="large" />

   Alternatively, you can <use> the SVG sprite directly (without Icon):

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

[!IMPORTANT] Icons of @stratakit/icons should always be used as external HTTP resources, because of SVG <use> element restrictions. Do not inline the SVG content directly in your React components. Data URIs and non-HTTP protocols are supported on a best effort basis using client-side JavaScript.

Bundler configuration

Vite

Within your Vite configuration, you will need to configure build.assetsInlineLimit to ensure .svg files are not inlined:

export default defineConfig({
	// …
	build: {
		assetsInlineLimit: (filePath) => {
			if (filePath.endsWith(".svg")) return false;
			return undefined;
		},
	},
});

Rsbuild

Within your Rsbuild configuration, you will need to configure output.dataUriLimit to ensure .svg files are not inlined:

export default {
	// …
	output: {
		dataUriLimit: {
			svg: 0,
		},
	},
};

esbuild

With esbuild, you will need to enable the file loader for .svg files:

esbuild.build({
	// …
	loader: {
		".svg": "file",
	},
});

[!NOTE] esbuild does not support bundling of assets when using the URL constructor, so you may need to additionally use a plugin to transform those into static import statements.

Contributing

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

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