🧊 Fresh Project Tabler Icons

example-tabler-icons.tsx

import IconCopy from '@tabler/icons-tsx/copy.tsx';

const example = () => {
   return (
    <div>
      <IconCopy />
    </div>
   );
};

export default example;

gist-tabler-icons.md

Using Tabler Icons in Fresh Projects

This is a guide on how to use @hashrock/tabler-icons-tsx in a @fresh project.

Table of Contents

1. Installation
2. Importing Icons
3. Creating Components
4. External Resources

Installation

Starting a @fresh project begins with the following command.

deno run -A -r https://fresh.deno.dev

📖 Note: Define the project directory with the . argument to set the current directory as the project directory.

Importing Icons

Setting up a @deno project with an import map is optional. It's possible with the following update to the deno.json file.

{
	"importMap": "./import-map.json"
}

Whether you use the import map or not, make sure to add the @tabler/icons-tsx package. In this example, we will use the instance of the package from the @deno.land/x registry.

{
	"imports": {
		"@tabler/icons-tsx/": "https://deno.land/x/tabler_icons_tsx@0.0.7/tsx/",
	}
}

Use the following @tabler/icons-tsx resource to locate the icons you need. In this example, I will be using the IconCopy icon.

import IconCopy from '@tabler/icons-tsx/copy.tsx';

📖 Note: The export name is always exactly the same as the icon name on the @tabler/icons-tsx resource.

Creating Components

After you have imported the icon, you can use it in your components following the pattern outlined below.

const example = () => {
   return (
    <div>
      <IconCopy />
    </div>
   );
};

External Resources

Despite the deprecation notice, the @tabler/icons-tsx resource is still a great choice among all of the tabler icon resources for a @fresh project.

Author

This gist is also available in a public respository created by the author ktortolini. Please, feel free to contact the author via email ✉ ktortolini@smu.edu.