This is a guide on how to use @iconify/iconify web components in a @fresh project.
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.
To use @iconify/iconify web components in your @fresh project, you need to add the following script to your _app.tsx file.
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>📖 Note: The script should be added to the
<head>element or<Head>component of your_app.tsxfile.
To search for your desired icon, visit the @iconify/icon-sets resource. In this example we will use the @iconify/tabler icon set. In the filter field, enter copy to follow along with this example. Select the third icon that appears in the results, and select the Iconify Icon tab to view the component code.
After you have copied the component code, you can use it in your project by adding it to the JSX file of your choice. Below is an example of how to use the copy icon in an example component.
const example = () => {
return (
<div>
{/* @ts-ignore */}
<iconify-icon icon="tabler:copy" width="24" height="24"></iconify-icon>
</div>
);
};
export default example;📖 Note: The
@ts-ignorecomment is used to suppress the TypeScript error that occurs when using theiconify-iconcomponent.
Feel free to search through other icon sets using the @iconify/icon-sets resource. Some great choices are @iconify/tabler, @iconify/lucide, and @iconify/heroicons.
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.