search

leshak / svelte-icons-pack

MIT License
61 stars 3 forks source link

<FiHome> is not a valid SSR component. Error when trying to run dev #1

Closed 3ux1n3 closed 2 years ago

3ux1n3 commented 2 years ago

Hi all am trying to copy a react component i have to svelte and i use many icones in the react one , here is my code

<script>

import FiHome from "svelte-icons-pack/fi/FiHome.js";
import FiPackage from "svelte-icons-pack/fi/FiPackage.js";
import FiCalendar from "svelte-icons-pack/fi/FiCalendar.js";
import FiRepeat from "svelte-icons-pack/fi/FiRepeat.js";
import FiSettings from "svelte-icons-pack/fi/FiSettings.js";
import FaBrandsYoutube from "svelte-icons-pack/fa/FaBrandsYoutube.js";
import FiHelpCircle from "svelte-icons-pack/fi/FiHelpCircle.js";
import FiLock from "svelte-icons-pack/fi/FiLock.js";

</script>

<aside class="w-56 flex-shrink-0 bg-[#FDFEFF] h-full overflow-auto p-6 pb-8">
    <div class="flex flex-col h-full">
        <nav class="flex-1 space-y-3">
            <a href="/" class="sidebar-link">
                <FiHome class="sidebar-link-icon" />
                <span>Dashboard</span>
            </a>
            <a href="google.com" class="sidebar-link">
                <FiPackage class="sidebar-link-icon" />
                <span>Orders</span>
            </a>
            <a href="google.com" class="sidebar-link">
                <FiCalendar class="sidebar-link-icon" />
                <span>Back in Time</span>
            </a>
            <a href="google.com" class="sidebar-link">
                <FiRepeat class="sidebar-link-icon" />
                <span>Auto Routing</span>
            </a>
            <a href="google.com" class="sidebar-link">
                <FiSettings class="sidebar-link-icon" />
                <span>Setting</span>
            </a>
        </nav>
        <div class="mt-10">
            <a
                    href="google.com"
                    class="rounded-md bg-video-gradient shadow-md inline-block w-full "
            >
                <div class="w-14 h-14 rounded-md bg-[#fdfeff] relative mx-auto -mt-7">
                    <div class="bg-video-gradient rounded absolute inset-1.5 flex items-center justify-center">
                        <FaBrandsYoutube class="text-white text-xl" />
                    </div>
                </div>
                <div class="text-center pt-3 pb-2 px-5 border-b border-white">
                    <p class="text-xs font-medium leading-3 text-white">
                        Learn how to use In less than 2 minutes
                    </p>
                </div>
                <div class="text-center">
                    <p class="text-sm font-bold text-white pt-4 pb-3">
                        Watch tutorial
                    </p>
                </div>
            </a>

            <div class="mt-7 space-y-3">
                <a href="google.com" class="sidebar-link">
                    <FiHelpCircle class="sidebar-link-icon" />
                    <span>Help</span>
                </a>
                <a href="/privacy" class="sidebar-link">
                    <FiLock class="sidebar-link-icon" />
                    <span>Privacy</span>
                </a>
            </div>
        </div>
    </div>
</aside>
leshak commented 2 years ago

You should use Icon component

import Icon from 'svelte-icons-pack/Icon.svelte';

and insert icons as

<Icon src={FiHome} class="..." />
3ux1n3 commented 2 years ago

thank you so much this worked