@stratakit/icons v0.1.1

@stratakit/icons

Standalone .svg icons for StrataKit.

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

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/bricks:

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} />
   
   // 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 @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.