Svelte Game-Icons

svelte-game-icons is a simple component wrapping the game-icons library for easy use in your Svelte projects.

Import

Import only the icons you need where you need them by using the following syntax: import {IconName} from 'svelte-game-icons';

Icons naming convention

All icons start with an uppercase letter and those that have multiple words are combined with no space nor hyphen but each word starts with an uppercase letter, for example: The dark-squad icon (called Dark squad on Game Icons website) is named DarkSquad.

Finally, all icons starting with 3d have been renamed with ThreeD instead: 3d-glasses becomes ThreeDGlasses.

Usage

Possible props for icons are:

Prop	Values	Example	Notes
bg	Any valid color string	#fff	This is the color of the square background of the icon
fg	Any valid color string	rgba(212,32,124,0.5)	This is the color of the icon itself
strokeColor	Any valid color string	hsl(121deg,33%,34%)	Color of the icon stroke
strokeWidth	Any valid length string	4px	See MDN

Examples

<Boots bg='white' fg='rgb(32,134,55)'/>

<Xylophone bg='rgba(0,0,0,0.1)' fg='hsl(233deg,85%,20%)' strokeWidth='1rem' strokeColor='rgba(0,0,0,0.33)'/>

<WindTurbine bg='black' fg='black' strokeWidth='4px' strokeColor='white'/>