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

2 Replies

Deno AI Helper•8mo ago

Based on the documentation, you can use Tabler icons with Fresh by importing them directly from the Deno.land URL. Here's an example of how you can import and use Tabler icons in your Fresh project:

import IconCircleChevronsRight from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/circle-chevrons-right.tsx";
import IconCircleChevronsLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/circle-chevrons-left.tsx";

import IconCircleChevronsRight from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/circle-chevrons-right.tsx";
import IconCircleChevronsLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/circle-chevrons-left.tsx";

In your case, you want to use the npm version of the Tabler icons with Preact and apply Tailwind classes conditionally based on the value of a signal. However, you're encountering an error because the className prop is not available with the npm import. The documentation does not provide a direct solution for using the npm version of Tabler icons with Fresh. However, I can offer some general advice that isn't in the documentation: 1. Ensure that the npm package you are using exports the icons as Preact components that accept a className prop. If the package does not support this, you may not be able to pass class names as you intend. 2. If the npm package does support passing a className prop, double-check that you are importing the icons correctly. The import statement should match the export format used by the npm package. 3. If the number of import lines is a concern, consider creating a single module that re-exports all the icons you need. This way, you can import multiple icons from a single local file, reducing the number of import lines in your components. Here's an example of how you might create such a module:

// icons.ts
export { default as IconCirclePlus } from "@tabler/icons-preact/icons/jsx/circle-plus";
// Add more exports for other icons you need

// icons.ts
export { default as IconCirclePlus } from "@tabler/icons-preact/icons/jsx/circle-plus";
// Add more exports for other icons you need

Then, in your component file, you can import the icons from

Deno AI Helper•8mo ago

your local icons.ts file:

import { IconCirclePlus } from "./icons.ts";

import { IconCirclePlus } from "./icons.ts";

Remember, this advice is general and not directly supported by the documentation. If the npm package you're using does not support the className prop, you might need to stick with the direct imports from Deno.land as shown in the documentation examples. 🦕

Helpful Links: Components | Fresh Fresh 1.1 - automatic JSX, plugins, DevTools, and more Sharing state between islands | Fresh docs