Breaking News: Grepper is joining You.com. Read the official announcement!

svelte font awesome

Combative Crane answered on August 5, 2022 Popularity 9/10 Helpfulness 5/10

answer svelte font awesome

svelte font awesome

Comment

https://www.npmjs.com/package/svelte-fa
use svelte svelte-fa
npm install svelte-fa
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-brands-svg-icons

<script>
import Fa from 'svelte-fa'
import { faFlag } from '@fortawesome/free-solid-svg-icons'
import { faGithub } from '@fortawesome/free-brands-svg-icons';

to use all fonts icons you can also do 
  for dynamic icons 
  i'm getting dynamic classname for that i use below
  import * as Solid from "@fortawesome/free-solid-svg-icons";
  import * as Brand from "@fortawesome/free-brands-svg-icons";

  export const allIcons = {
    ...Solid,
    ...Brand,
  };

in my componet
import { allIcons } from "../../common/fontAwesome.svelte";
 const iconSetter = (icon) => {
    if (typeof icon === "string") {
      const camalizeString = camelize(icon.split(" ")[1]);

      console.log("kebabString", camalizeString);

      return allIcons[camalizeString];
    }

    return "";
  };

  <Fa
	icon={iconSetter(data.icon)}
    color="var(--active)"
    size="1.5x"
	/>

</script>

<Fa icon={faFlag} />
<Fa icon={faGithub} />
  
  <Fa
  icon={faFlag}
  size="2x"
  color="#ff0000"
  fw
  pull="left"
  scale={1.2}
  translateX={0.2}
  translateY={0.2}
  rotate={90}
  flip="horizontal"
  spin
  pulse
/>

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: www.npmjs.com

Tags: font-awesome javascript svelte

Link to this answer
Share Copy Link

Contributed on Aug 05 2022

Combative Crane

0 Answers Avg Quality 2/10

svelte font awesome

Contents

More Related Answers

svelte font awesome

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.