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

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

Fresh tabler icon class

Fresh tabler icon class

Continue the conversation

Deno

Continue the conversation

Deno

Similar Threads