docs: homepage update

Author: shinokada

package.json

@@ -643,4 +643,4 @@
     },
     "./package.json": "./package.json"
   }
-}
+}

src/lib/list-group/ListgroupItem.svelte

@@ -4,7 +4,7 @@
   import { tv } from "tailwind-variants";
   import { type ListgroupItemProps as Props, listGroupItem } from ".";
 
-  let { children, onclick, active, current, disabled, name, Icon, href, currentClass = "text-white bg-primary-700 dark:text-white dark:bg-gray-800", normalClass, disabledClass = "text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400", liClass = "py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg", class: className, aClasss, btnClass, iconClass="me-2.5 h-5 w-5", ...restProps }: Props = $props();
+  let { children, onclick, active, current, disabled, name, Icon, href, currentClass = "text-white bg-primary-700 dark:text-white dark:bg-gray-800", normalClass, disabledClass = "text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400", liClass = "py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg", class: className, aClasss, btnClass, iconClass = "me-2.5 h-5 w-5", ...restProps }: Props = $props();
 
   active = getContext("active");
 

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { P } from "$lib";
+  import { P, A } from "$lib";
   import HighlightCompo from "./utils/HighlightCompo.svelte";
   import H1 from "./utils/H1.svelte";
   import H2 from "./utils/H2.svelte";
@@ -35,4 +35,9 @@
 <H3>Tailwind</H3>
 <P>Add the following to tailwind.config.js:</P>
 
+<H3>SVG Icons</H3>
+<P>If you are using any icons from <A href="https://svelte-svg-icons.codewithshin.com/">Svelte SVG Icon Sets</A>, you need to update the content in tailwind.config.js. For example, if you are using Flowbite-Svelte-Icons and Svelte-Animated-Icons:</P>
+
+<HighlightCompo class="mb-8" codeLang="js" code={modules["./md/svg-icons.md"] as string} />
+
 <HighlightCompo class="mb-8" codeLang="json" code={modules["./md/tailwind-config.md"] as string} />

src/routes/components/accordion/examples/Icon.svelte

@@ -7,7 +7,7 @@
   <AccordionItem>
     {#snippet header()}
       <span class="flex gap-2 text-base">
-        <CartFlowbite/>
+        <CartFlowbite />
         <span>My Header 1</span>
       </span>
     {/snippet}

src/routes/components/tabs/examples/AnimatedIcons.svelte

@@ -19,7 +19,7 @@
   <TabItem>
     {#snippet titleSlot()}
       <div class="flex items-center gap-2">
-        <GridFlowbite/>
+        <GridFlowbite />
         Dashboard
       </div>
     {/snippet}

src/routes/components/toast/examples/PushNotification.svelte

@@ -6,7 +6,7 @@
   <Toast align={false}>
     <span class="font-semibold text-gray-900 dark:text-white">New notification</span>
     <div class="mt-3 flex items-center">
-      <Avatar src="/images/profile-picture-3.webp" alt="Bonnie Green"/>
+      <Avatar src="/images/profile-picture-3.webp" alt="Bonnie Green" />
       <div class="ms-3">
         <h4 class="text-sm font-semibold text-gray-900 dark:text-white">Bonnie Green</h4>
         <div class="text-sm font-normal">commented on your photo</div>

src/routes/components/toast/examples/ToastMessage.svelte

@@ -5,7 +5,7 @@
 <div class="flex h-[180px] flex-col items-center">
   <Toast align={false} iconClass="w-10 h-10 rounded-full">
     {#snippet icon()}
-      <Avatar src="/images/profile-picture-1.webp" alt="Jese Leos"/>
+      <Avatar src="/images/profile-picture-1.webp" alt="Jese Leos" />
     {/snippet}
     <div class="ms-3 text-sm font-normal">
       <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>

src/routes/forms/checkbox/examples/Advanced.svelte

@@ -8,21 +8,21 @@
 <p class="mb-5 text-lg font-medium text-gray-900 dark:text-white">Choose technology:</p>
 <div class="grid w-full gap-6 md:grid-cols-3">
   <Checkbox custom>
-    <button class="w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-white p-5 font-normal text-gray-500 hover:bg-gray-50 hover:text-gray-600 peer-checked:border-primary-600 peer-checked:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-gray-300 text-left">
+    <button class="w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-white p-5 text-left font-normal text-gray-500 hover:bg-gray-50 hover:text-gray-600 peer-checked:border-primary-600 peer-checked:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-gray-300">
       <React />
       <p class="w-full text-lg font-semibold">React Js</p>
       <p class="w-full text-sm">A JavaScript library for building user interfaces.</p>
     </button>
   </Checkbox>
   <Checkbox custom>
-    <button class="w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-white p-5 font-normal text-gray-500 hover:bg-gray-50 hover:text-gray-600 peer-checked:border-primary-600 peer-checked:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-gray-300 text-left">
+    <button class="w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-white p-5 text-left font-normal text-gray-500 hover:bg-gray-50 hover:text-gray-600 peer-checked:border-primary-600 peer-checked:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-gray-300">
       <Vue />
       <p class="w-full text-lg font-semibold">Vue Js</p>
       <p class="w-full text-sm">Vue.js is an model–view front end JavaScript framework.</p>
     </button>
   </Checkbox>
   <Checkbox custom>
-    <button class="w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-white p-5 font-normal text-gray-500 hover:bg-gray-50 hover:text-gray-600 peer-checked:border-primary-600 peer-checked:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-gray-300 text-left">
+    <button class="w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-white p-5 text-left font-normal text-gray-500 hover:bg-gray-50 hover:text-gray-600 peer-checked:border-primary-600 peer-checked:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-gray-300">
       <Angular />
       <p class="w-full text-lg font-semibold">Angular</p>
       <p class="w-full text-sm">A TypeScript-based web application framework.</p>

src/routes/md/svg-icons.md

@@ -0,0 +1,12 @@
+import type { Config } from 'tailwindcss';
+
+export default { 
+  content: [
+    './src/**/*.{html,js,svelte,ts}', 
+    './node_modules/svelte-5-ui-lib/**/*.{html,js,svelte,ts}', 
+    './node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}',
+    './node_modules/svelte-animated-icons/**/*.{html,js,svelte,ts}'
+  ], 
+  // more code
+  },
+} satisfies Config;

src/routes/typography/image/examples/Enhanced.svelte

@@ -3,4 +3,4 @@
   import MyImage from "./garnished.webp?enhanced";
 </script>
 
-<ImgEnhanced src={MyImage} alt="An alt text" caption="This is a caption" sizes="100vw"/>
+<ImgEnhanced src={MyImage} alt="An alt text" caption="This is a caption" sizes="100vw" />