Docs updates (#1472)

* docs(icons): update copywriting for the icon pages and optimize for SEO

* fix(icons): remove duplicate h1 tag on same page

* refactor(icons): simplify and improve responsive markup

* tests(icons): update test checks

src/routes/icons/outline-icons.md

@@ -1,12 +1,18 @@
 ---
 layout: componentLayout
-title: Outline Icons - Flowbite Svelte Icons
+title: Svelte Outline Icons - Flowbite
 breadcrumb_title: Outline Icons
-component_title: OutlineIcons
+component_title: Outline Icons
 dir: Icons
-description: Outline icons
+description: Get started with a collection of outline styled open-source Svelte 5 powered icons built by the Flowbite community and use the interactive search and configurator features
 ---
 
+Use this page to easily search and configure a collection of up to 500 SVG open-source outline styled icons from the Flowbite library optimized for Svelte. Make sure that you have followed the Svelte 4 or Svelte 5 Icons guide from the documentation.
+
+## Browse outline icons
+
+Search by the icon name and you'll find the component name that you need to import in your Svelte app.
+
 <script>
   import MetaTag from './utils/MetaTag.svelte';
   import { Range, Label, Tabs, TabItem, TableSearch } from '$lib';
@@ -37,15 +43,14 @@ description: Outline icons
 
 <MetaTag {title} {subtitle} {path} {description} />
 
-<div class="m-8 w-full">
-  <h1>Outline Icons - Flowbite Svelte Icons</h1>
-  <TableSearch
-    placeholder="Search by icon name"
-    hoverable={true}
-    bind:inputValue={searchTerm}
-    divClass="relative overflow-x-auto"
-  >
-    <div class="xl:w-1/3 lg:w-2/5 md:w-1/2 sm:w-3/4 w-full p-4">
+<div class="w-full">
+    <TableSearch
+      placeholder="Search by icon name"
+      hoverable={true}
+      bind:inputValue={searchTerm}
+      divClass="relative overflow-x-auto [&>div]:p-0"
+    >
+    <div class="w-full max-w-64 mb-4">
       <Label class="text-lg py-4 ">Icon size: {size}</Label>
       <Range id="range1" min="4" max="10" bind:value={size} />
     </div>

src/routes/icons/solid-icons.md

@@ -1,12 +1,18 @@
 ---
 layout: componentLayout
-title: Solid Icons - Flowbite Svelte Icons
+title: Svelte Solid Icons - Flowbite
 breadcrumb_title: Solid Icons
-component_title: SolidIcons
+component_title: Solid Icons
 dir: Icons
-description: Solid icons
+description: Get started with a collection of solid styled open-source Svelte 5 powered icons built by the Flowbite community and use the interactive search and configurator features
 ---
 
+Use this page to easily search and configure a collection of up to 500 SVG open-source solid styled icons from the Flowbite library optimized for Svelte. Make sure that you have followed the Svelte 4 or Svelte 5 Icons guide from the documentation.
+
+## Browse solid icons
+
+Search by the icon name and you'll find the component name that you need to import in your Svelte app.
+
 <script>
   import MetaTag from './utils/MetaTag.svelte';
   import { Range, Label, Tabs, TabItem, TableSearch } from '$lib';
@@ -37,15 +43,14 @@ description: Solid icons
 
 <MetaTag {title} {subtitle} {path} {description} />
 
-<div class="m-8 w-full">
-  <h1>Solid Icons - Flowbite Svelte Icons</h1>
+<div class="w-full">
   <TableSearch
     placeholder="Search by icon name"
     hoverable={true}
     bind:inputValue={searchTerm}
-    divClass="relative overflow-x-auto"
+    divClass="relative overflow-x-auto [&>div]:p-0"
   >
-    <div class="xl:w-1/3 lg:w-2/5 md:w-1/2 sm:w-3/4 w-full p-4">
+    <div class="w-full max-w-64 mb-4">
       <Label class="text-lg py-4 ">Icon size: {size}</Label>
       <Range id="range1" min="4" max="10" bind:value={size} />
     </div>

src/routes/icons/svelte-4.md

@@ -1,20 +1,19 @@
 ---
 layout: componentLayout
-title: Svelte 4 Getting started - Flowbite Svelte Icons v1
-breadcrumb_title: Svelte 4 Getting started
-component_title: Svelte 4 Getting started
+title: Svelte 4 Icons - Flowbite
+breadcrumb_title: Svelte 4 Icons
+component_title: Svelte 4 Icons
 dir: Icons
-description: Svelte 4 Getting started
+description: Get started with a collection of open-source Svelte 5 powered icons built by the Flowbite community and based on the official design
 ---
 
-
 <script>
   import { Banner } from 'flowbite-svelte';
   import { MetaTags } from 'svelte-meta-tags';
   import { removeHyphensAndCapitalize } from './utils/utils';
 </script>
 
-# Svelte 4 Getting started - Flowbite Svelte Icons v1
+Use well over 500 SVG icons based on the open-source [Flowbite Icons](https://flowbite.com/icons/) library to power your Svelte application with optimized icons provided with both outline and solid styles. This page allows usage for Svelte 4 applications.
 
 <div class="flex gap-2 my-8">
 <a href="https://github.com/sponsors/shinokada" target="_blank"><img src="https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86" alt="sponsor" ></a>

src/routes/icons/svelte-5.md

@@ -1,20 +1,19 @@
 ---
 layout: componentLayout
-title: Svelte 5 Getting started - Flowbite Svelte Icons v2
-breadcrumb_title: Svelte 5 Getting started
-component_title: Svelte 5 Getting started
+title: Svelte 5 Icons - Flowbite
+breadcrumb_title: Svelte 5 Icons
+component_title: Svelte 5 Icons
 dir: Icons
-description: Svelte 5 Getting started
+description: Get started with a collection of open-source Svelte 5 powered icons built by the Flowbite community and based on the official design system
 ---
 
-
 <script>
   import { Banner } from 'flowbite-svelte';
   import { A } from '$lib'
   import { removeHyphensAndCapitalize } from './utils/utils';
 </script>
 
-# Svelte 5 Getting started - Flowbite Svelte Icons v2
+Use well over 500 SVG icons based on the open-source [Flowbite Icons](https://flowbite.com/icons/) library to power your Svelte application with optimized icons provided with both outline and solid styles. This page allows usage for Svelte 5 applications.
 
 <div class="flex gap-2 my-8">
 <a href="https://github.com/sponsors/shinokada" target="_blank"><img src="https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86" alt="sponsor" ></a>

tests/icons.test.ts

@@ -2,20 +2,20 @@ import { expect, test } from '@playwright/test';
 
 test('Icons Outline page page should have h1', async ({ page }) => {
   await page.goto('/icons/outline-icons');
-  expect(await page.textContent('h1')).toBe('Outline Icons - Flowbite Svelte Icons');
+  expect(await page.textContent('h1')).toBe('Svelte Outline Icons - Flowbite');
 });
 
 test('Icons Solid page page should have h1', async ({ page }) => {
   await page.goto('/icons/solid-icons');
-  expect(await page.textContent('h1')).toBe('Solid Icons - Flowbite Svelte Icons');
+  expect(await page.textContent('h1')).toBe('Svelte Solid Icons - Flowbite');
 });
 
 test('Icons Svelte 4 getting started page page should have h1', async ({ page }) => {
   await page.goto('/icons/svelte-4');
-  expect(await page.textContent('h1')).toBe('Svelte 4 Getting started - Flowbite Svelte Icons v1');
+  expect(await page.textContent('h1')).toBe('Svelte 4 Icons - Flowbite');
 });
 
 test('Icons Svelte 5 getting started page page should have h1', async ({ page }) => {
   await page.goto('/icons/svelte-5');
-  expect(await page.textContent('h1')).toBe('Svelte 5 Getting started - Flowbite Svelte Icons v2');
+  expect(await page.textContent('h1')).toBe('Svelte 5 Icons - Flowbite');
 });