title: Passing a string as a prop and using it to make a class name in Svelte
body: <p>I have this BigButton component where I want to pass a bgColor prop :</p>
  <pre class="lang-js prettyprint-override"><code>&lt;BigButton
          title=&quot;Join a Game&quot;
          description=&quot;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, est?&quot;
          icon=&quot;star&quot;
          bgColor=&quot;blue-500&quot;
      /&gt;
  </code></pre>
  <p>then on the component I handle it in the onMount hook:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script lang=&quot;ts&quot;&gt;
      import { onMount } from 'svelte';
  
      export let title: string;
      export let description: string = '';
      export let icon: string;
      export let bgColor: string | undefined;
      let iconUrl: string;
  
      onMount(() =&gt; {
          if (icon) iconUrl = `/icons/${icon}@2x.png`;
          if (bgColor) bgColor = `bg-${bgColor}`;
      });
  &lt;/script&gt;
  
  &lt;div
      class=&quot;flex flex-row w-96 rounded-3xl p-6 
      justify-center place-items-center {bgColor ? bgColor : 'bg-slate-400'}&quot;
  &gt;
  </code></pre>
  <p>the component renders with the class name but the style is not applied.</p>
  <p>I did something similar with the icon prop, which does work:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;img src={iconUrl} alt=&quot;gold star&quot; /&gt;
  </code></pre>