@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

1. Import the icon you want to use.

   Using a static import to get the URL of the icon:

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

   Or using the import.meta feature to get the URL of the icon:

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

   The static import method is good for use with build tools that support it, while the import.meta works better in browsers (but may not work reliably in all build tools).

2. Pass it to the Icon component from @stratakit/mui or @stratakit/foundations.

   import { Icon } from "@stratakit/mui";
   
   <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 the Icon component):

   <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.