yukipastelcat / svelte-fontawesome Goto Github PK

The current example code includes an error.

<script>
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSmileWink as fasSmileWink } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from 'fontawesome-svelte';

library.add(faSmileWink);
</script>

<FontAwesomeIcon icon={fasSmileWink} />
<FontAwesomeIcon icon={['fas', 'smile-wink']} />
<!-- The solid style is implicit -->
<FontAwesomeIcon icon="smile-wink" />

The line library.add(faSmileWink); has to be library.add(fasSmileWink); to work properly.

Hi,

I'm using Tailwind and trying to add a class to the fontawesomeIcon component. Fontawesome-svelete adds a comma when it compiles to each class which breaks tailwind.

Example:

<FontAwesomeIcon icon={faSun} class="text-yellow-300 dark:text-red-500" />

In the inspector, the HTML class looks like this

<svg
aria-hidden="true" 
focusable="false" 
data-prefix="fas" 
data-icon="cloud-moon" 
class="svg-inline--fa fa-cloud-moon fa-w-18 text-yellow-300,dark:text-red-500"
restofSVGCode....
</svg>

A simple work-around is just to wrap the FontAwesomeIcon component in a div or I tag, and then add the tailwind info there. However, not sure if this an issue we could fix in FontAwesomeIcon and rid of the adding of commas?

Cheers,
DMDComposer

Hello,

I migrated my app from svelte to sapper, which requires fontawesome-svelte to keep Icon.svelte component in its npm package ( for SSR purpose ).

Would you mind to keep the src folder when publish the npm package ? It will solve the problem in sapper mode.

Thanks