Good Practices

Fontawesome

We recommend using FontAwesome for all the icons in the project.

For the svg icons of fontawesome, their fontawesome svg libraries, example:

• @fortawesome/pro-light-svg-icons
• @fortawesome/pro-regular-svg-icons
• etc...

Make sure you have the FontAwesome SVG Core installed as well as its official FontAwesome Component for Svelte:

• @fortawesome/fontawesome-pro (It doesn't need to be the pro, although it is recommended)
• @fortawesome/fontawesome-svg-core
• @fortawesome/svelte-fontawesome

We recommend using it in all of your icon displaying.

• @fortawesome/svelte-fontawesome

# Usage Example

# Layout

Make sure to import and add to the library all the icons you are going to use on your project. This code should be part of your first +layout.svelte file of your source directory.

        <script lang="ts">
	import '$lib/styles/main.css';
	import { library } from '@fortawesome/fontawesome-svg-core';
	import {
		faGavel,
		faEnvelope,
		faPeopleSimple,
		faInfoCircle,
		faFile as faFileRegular
	} from '@fortawesome/pro-regular-svg-icons';

	library.add(faFileRegular, faInfoCircle, faPeopleSimple, faGavel, faEnvelope);
</script>

      

# Components

        <FontAwesomeIcon icon={['far', 'square-plus']} size={'xl'} />