vite-plugin-kern-extra-icons

This Vite plugin allows using arbitrary Material icons with KERN UX.

KERN UX provides only a very limited icon set, e.g. kern-icon--delete. To use an any icon not bundled with KERN, integrate this plugin and use any icon with the same syntax (e.g., kern-icon--fullscreen). To use the icons in filled style, use kern-icon-fill-- as prefix (e.g., kern-icon-fill--layers).

Installation

Install this package using your favorite package manager, e.g.:

npm i -D vite-plugin-kern-extra-icons

Add the plugin to your Vite configuration:

// vite.config.ts

import kernExtraIcons from 'vite-plugin-kern-extra-icons'
// ...

export default defineConfig({
	plugins: [
		kernExtraIcons(),
	],
	// ...
})

Import the generated CSS whereever you include the KERN CSS, too:

// loadKern.ts

import kernCss from '@kern-ux/native/dist/kern.min.css?raw'
import kernExtraIcons from 'virtual:kern-extra-icons'

export function loadKern() {
	const kernSheet = new CSSStyleSheet()
	kernSheet.replaceSync(kernCss)
	document.adoptedStyleSheets.push(kernSheet)

	// Don't forget to include the extra icons CSS!
	document.adoptedStyleSheets.push(kernExtraIcons)
}

if (import.meta.hot) {
	import.meta.hot.on('kern-extra-icons', ({ icons }) => {
		icons.forEach((icon) => kernExtraIcons.insertRule(icon))
	})
}

Options

You can configure this Vite plugin with options.

Using CSS @layer

If your application uses @layer grouping, you can encapsulate the KERN icons as a separate CSS layer. This is necessary if you encapsulate KERN itself into a CSS layer (remember to put the icons layer first!).

Example:

// vite.config.ts

// ...
kernExtraIcons({
	cssLayer: 'kern-ux-icons',
}),

This example yields to the following CSS:

/* virtual:kern-extra-icons */

@layer kern-ux-icons {
	/* ... */
}

Ignore files

If you have dependencies in your project that are not in a folder named node_modules, you still want to ignore them. As the differences between "first-class" code and dependencies can not be determined automatically, you can configure additional ignores.

Example:

// vite.config.ts

// ...
kernExtraIcons({
	ignoreFilename: (name: string) => name.includes('my_custom_modules'),
}),

Load additional icons

For icons that are not listed in your code, but nevertheless should be bundled for whatever reason (e.g., the icon names are generated dynamically), you can list them in additionalIcons.

Example:

// vite.config.ts

// ...
kernExtraIcons({
	additionalIcons: [
		{ name: 'fullscreen-exit' },
	],
}),

Current limitations / Known bugs

The used KERN icons are detected by a regex search.

This has two drawbacks:

• If you write KERN icons in a comment (e.g., // You could also use kern-icon--fullscreen), these icons will be bundled too.
• If you generate KERN icon CSS classes (e.g., 'kern-icon--' + (isInFullscreen ? 'fullscreen-exit' : 'fullscreen')), these icons are not detected.

Stay In Touch

• Contact us via email 📧

made by Dataport with ❤️