MeastBlue Posts

MeastBlue

•Created by MeastBlue on 4/27/2024 in #help

Fresh tabler icon class

Hello I want to use the fresh tabler icon lib without using the npm version like this:

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.8/",
    "preact": "https://esm.sh/preact@10.19.6",
    "preact/": "https://esm.sh/preact@10.19.6/",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
    "lucide-preact": "npm:lucide-preact",
    "tailwindcss": "npm:tailwindcss@3.4.1",
    "tailwindcss/": "npm:/tailwindcss@3.4.1/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",
    "@tabler/icons-preact": "npm:@tabler/icons-preact",
    "$std/": "https://deno.land/std@0.216.0/",

  }
}

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.8/",
    "preact": "https://esm.sh/preact@10.19.6",
    "preact/": "https://esm.sh/preact@10.19.6/",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
    "lucide-preact": "npm:lucide-preact",
    "tailwindcss": "npm:tailwindcss@3.4.1",
    "tailwindcss/": "npm:/tailwindcss@3.4.1/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",
    "@tabler/icons-preact": "npm:@tabler/icons-preact",
    "$std/": "https://deno.land/std@0.216.0/",

  }
}

Then using it with a tailwind class conditioned by the value of a signal:

import {IconCirclePlus} from "@tabler/icons-preacts"
import {useSignal} from "@preact/signals";

const component = (props) => {
  const isOpen = useSignal(false);

  return (
    <>
        <span onClick={() => isOpen.value = !isOpen.value}>Click me</span>
        <IconCirclePlus className={`${isOpen.value ? "block" :"hidden"} absolute h-6 w-6 text-dark`}/>
    </>
  )
}

import {IconCirclePlus} from "@tabler/icons-preacts"
import {useSignal} from "@preact/signals";

const component = (props) => {
  const isOpen = useSignal(false);

  return (
    <>
        <span onClick={() => isOpen.value = !isOpen.value}>Click me</span>
        <IconCirclePlus className={`${isOpen.value ? "block" :"hidden"} absolute h-6 w-6 text-dark`}/>
    </>
  )
}

I'm encountering an error because the props class is not available with the tabler preact icon, but it is available when the import is done that way:

import IconCirclePlus from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/circle-plus.tsx"

import IconCirclePlus from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/circle-plus.tsx"

Can you help me make this work with the npm import? Because it's enough that I have several icons to import that the number of import lines may be too large. Thanks

3 replies