Preact + deno convertion of react-icons
This library is a simple port from react-icons compatible with deno fresh project.
The React Icons doc The for fresh version is here if you have time to help the project is here
Setup
To use it simply fill your import_map.json
Using jsdelivr (best approch)
node preact can not be import via cdn.jsdelivr.net keep esm.sh
{
"imports": {
"preact": "https://esm.sh/preact@10.15.1",
"preact/": "https://esm.sh/preact@10.15.1/",
"react-icons/ai": "https://cdn.jsdelivr.net/gh/urielch/react-icons-ai@1.0.0/mod.ts",
"react-icons/bs": "https://cdn.jsdelivr.net/gh/urielch/react-icons-bs@1.0.0/mod.ts",
"react-icons/bi": "https://cdn.jsdelivr.net/gh/urielch/react-icons-bi@1.0.0/mod.ts",
"react-icons/ci": "https://cdn.jsdelivr.net/gh/urielch/react-icons-ci@1.0.0/mod.ts",
"react-icons/di": "https://cdn.jsdelivr.net/gh/urielch/react-icons-di@1.0.0/mod.ts",
"react-icons/fi": "https://cdn.jsdelivr.net/gh/urielch/react-icons-fi@1.0.0/mod.ts",
"react-icons/fc": "https://cdn.jsdelivr.net/gh/urielch/react-icons-fc@1.0.0/mod.ts",
"react-icons/fa": "https://cdn.jsdelivr.net/gh/urielch/react-icons-fa@1.0.0/mod.ts",
"react-icons/gi": "https://cdn.jsdelivr.net/gh/urielch/react-icons-gi@1.0.0/mod.ts",
"react-icons/go": "https://cdn.jsdelivr.net/gh/urielch/react-icons-go@1.0.0/mod.ts",
"react-icons/gr": "https://cdn.jsdelivr.net/gh/urielch/react-icons-gr@1.0.0/mod.ts",
"react-icons/hi": "https://cdn.jsdelivr.net/gh/urielch/react-icons-hi@1.0.0/mod.ts",
"react-icons/hi2": "https://cdn.jsdelivr.net/gh/urielch/react-icons-hi2@1.0.0/mod.ts",
"react-icons/io": "https://cdn.jsdelivr.net/gh/urielch/react-icons-io@1.0.0/mod.ts",
"react-icons/io5": "https://cdn.jsdelivr.net/gh/urielch/react-icons-io5@1.0.0/mod.ts",
"react-icons/im": "https://cdn.jsdelivr.net/gh/urielch/react-icons-im@1.0.0/mod.ts",
"react-icons/md": "https://cdn.jsdelivr.net/gh/urielch/react-icons-md@1.0.0/mod.ts",
"react-icons/ri": "https://cdn.jsdelivr.net/gh/urielch/react-icons-ri@1.0.0/mod.ts",
"react-icons/si": "https://cdn.jsdelivr.net/gh/urielch/react-icons-si@1.0.0/mod.ts",
"react-icons/sl": "https://cdn.jsdelivr.net/gh/urielch/react-icons-sl@1.0.0/mod.ts",
"react-icons/tb": "https://cdn.jsdelivr.net/gh/urielch/react-icons-tb@1.0.0/mod.ts",
"react-icons/ti": "https://cdn.jsdelivr.net/gh/urielch/react-icons-ti@1.0.0/mod.ts",
"react-icons/wi": "https://cdn.jsdelivr.net/gh/urielch/react-icons-wi@1.0.0/mod.ts",
"react-icons/cg": "https://cdn.jsdelivr.net/gh/urielch/react-icons-cg@1.0.0/mod.ts",
"react-icons/lu": "https://cdn.jsdelivr.net/gh/urielch/react-icons-lu@1.0.0/mod.ts",
"react-icons/rx": "https://cdn.jsdelivr.net/gh/urielch/react-icons-rx@1.0.0/mod.ts",
"react-icons/tfi": "https://cdn.jsdelivr.net/gh/urielch/react-icons-tfi@1.0.0/mod.ts",
"react-icons/vsc": "https://cdn.jsdelivr.net/gh/urielch/react-icons-vsc@1.0.0/mod.ts",
"react-icons/ai/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-ai@1.0.0/ico/",
"react-icons/bs/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-bs@1.0.0/ico/",
"react-icons/bi/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-bi@1.0.0/ico/",
"react-icons/ci/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-ci@1.0.0/ico/",
"react-icons/di/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-di@1.0.0/ico/",
"react-icons/fi/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-fi@1.0.0/ico/",
"react-icons/fc/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-fc@1.0.0/ico/",
"react-icons/fa/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-fa@1.0.0/ico/",
"react-icons/gi/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-gi@1.0.0/ico/",
"react-icons/go/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-go@1.0.0/ico/",
"react-icons/gr/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-gr@1.0.0/ico/",
"react-icons/hi/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-hi@1.0.0/ico/",
"react-icons/hi2/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-hi2@1.0.0/ico/",
"react-icons/io/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-io@1.0.0/ico/",
"react-icons/io5/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-io5@1.0.0/ico/",
"react-icons/im/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-im@1.0.0/ico/",
"react-icons/md/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-md@1.0.0/ico/",
"react-icons/ri/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-ri@1.0.0/ico/",
"react-icons/si/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-si@1.0.0/ico/",
"react-icons/sl/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-sl@1.0.0/ico/",
"react-icons/tb/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-tb@1.0.0/ico/",
"react-icons/ti/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-ti@1.0.0/ico/",
"react-icons/wi/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-wi@1.0.0/ico/",
"react-icons/cg/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-cg@1.0.0/ico/",
"react-icons/lu/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-lu@1.0.0/ico/",
"react-icons/rx/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-rx@1.0.0/ico/",
"react-icons/tfi/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-tfi@1.0.0/ico/",
"react-icons/vsc/": "https://cdn.jsdelivr.net/gh/urielch/react-icons-vsc@1.0.0/ico/"
}
}Later on yu will be able to import a single icon using:
import { AiTwotonePrinter } from "https://cdn.jsdelivr.net/gh/urielch/react-icons-ai@1.0.0/ico/AiTwotonePrinter.ts";Or using your import_map.json:
import { AiTwotonePrinter } from "react-icons/ai/AiTwotonePrinter.ts";using deno/x
I’m having some issue with deno/x currently, some package cause deno/x to crash or may be not available.
{
"imports": {
"preact": "https://esm.sh/preact@10.15.1",
"preact/": "https://esm.sh/preact@10.15.1/",
"react-icons/ai": "https://deno.land/x/react_icons_ai/mod.ts",
"react-icons/bs": "https://deno.land/x/react_icons_bs/mod.ts",
"react-icons/bi": "https://deno.land/x/react_icons_bi/mod.ts",
"react-icons/ci": "https://deno.land/x/react_icons_ci/mod.ts",
"react-icons/di": "https://deno.land/x/react_icons_di/mod.ts",
"react-icons/fi": "https://deno.land/x/react_icons_fi/mod.ts",
"react-icons/fc": "https://deno.land/x/react_icons_fc/mod.ts",
"react-icons/fa": "https://deno.land/x/react_icons_fa/mod.ts",
"react-icons/gi": "https://deno.land/x/react_icons_gi/mod.ts",
"react-icons/go": "https://deno.land/x/react_icons_go/mod.ts",
"react-icons/gr": "https://deno.land/x/react_icons_gr/mod.ts",
"react-icons/hi": "https://deno.land/x/react_icons_hi/mod.ts",
"react-icons/hi2": "https://deno.land/x/react_icons_hi2/mod.ts",
"react-icons/io": "https://deno.land/x/react_icons_io/mod.ts",
"react-icons/io5": "https://deno.land/x/react_icons_io5/mod.ts",
"react-icons/im": "https://deno.land/x/react_icons_im/mod.ts",
"react-icons/md": "https://deno.land/x/react_icons_md/mod.ts",
"react-icons/ri": "https://deno.land/x/react_icons_ri/mod.ts",
"react-icons/si": "https://deno.land/x/react_icons_si/mod.ts",
"react-icons/sl": "https://deno.land/x/react_icons_sl/mod.ts",
"react-icons/tb": "https://deno.land/x/react_icons_tb/mod.ts",
"react-icons/ti": "https://deno.land/x/react_icons_ti/mod.ts",
"react-icons/wi": "https://deno.land/x/react_icons_wi/mod.ts",
"react-icons/cg": "https://deno.land/x/react_icons_cg/mod.ts",
"react-icons/tfi": "https://deno.land/x/react_icons_tfi/mod.ts",
"react-icons/vsc": "https://deno.land/x/react_icons_vsc/mod.ts",
"react-icons/ai/": "https://deno.land/x/react_icons_ai/ico/",
"react-icons/bs/": "https://deno.land/x/react_icons_bs/ico/",
"react-icons/bi/": "https://deno.land/x/react_icons_bi/ico/",
"react-icons/ci/": "https://deno.land/x/react_icons_ci/ico/",
"react-icons/di/": "https://deno.land/x/react_icons_di/ico/",
"react-icons/fi/": "https://deno.land/x/react_icons_fi/ico/",
"react-icons/fc/": "https://deno.land/x/react_icons_fc/ico/",
"react-icons/fa/": "https://deno.land/x/react_icons_fa/ico/",
"react-icons/gi/": "https://deno.land/x/react_icons_gi/ico/",
"react-icons/go/": "https://deno.land/x/react_icons_go/ico/",
"react-icons/gr/": "https://deno.land/x/react_icons_gr/ico/",
"react-icons/hi/": "https://deno.land/x/react_icons_hi/ico/",
"react-icons/hi2/": "https://deno.land/x/react_icons_hi2/ico/",
"react-icons/io/": "https://deno.land/x/react_icons_io/ico/",
"react-icons/io5/": "https://deno.land/x/react_icons_io5/ico/",
"react-icons/im/": "https://deno.land/x/react_icons_im/ico/",
"react-icons/md/": "https://deno.land/x/react_icons_md/ico/",
"react-icons/ri/": "https://deno.land/x/react_icons_ri/ico/",
"react-icons/si/": "https://deno.land/x/react_icons_si/ico/",
"react-icons/sl/": "https://deno.land/x/react_icons_sl/ico/",
"react-icons/tb/": "https://deno.land/x/react_icons_tb/ico/",
"react-icons/ti/": "https://deno.land/x/react_icons_ti/ico/",
"react-icons/wi/": "https://deno.land/x/react_icons_wi/ico/",
"react-icons/cg/": "https://deno.land/x/react_icons_cg/ico/",
"react-icons/tfi/": "https://deno.land/x/react_icons_tfi/ico/",
"react-icons/vsc/": "https://deno.land/x/react_icons_vsc/ico/"
}
}Later on yu will be able to import a single icon using:
import { AiTwotonePrinter } from "https://deno.land/x/react_icons_ai@1.0.0/ico/AiTwotonePrinter.ts";Or using your import_map.json:
import { AiTwotonePrinter } from "react-icons/ai/AiTwotonePrinter.ts";using esm.sh
{
"imports": {
"preact": "https://esm.sh/preact@10.15.1",
"preact/": "https://esm.sh/preact@10.15.1/",
"react-icons/ai": "https://esm.sh/gh/urielch/react-icons-ai@1.0.0/mod.ts",
"react-icons/bs": "https://esm.sh/gh/urielch/react-icons-bs@1.0.0/mod.ts",
}
}direct icon import do not works with esm.sh
ex: https://cdn.jsdelivr.net/gh/urielch/react-icons-ai@1.0.0/mod.ts is broken for now.
sample
Once import_map.json is ready, just use it like in a regular React app, bur with Preact
import { AiFillAccountBook } from "react-icons/ai";
export default function TesSvg() {
return (<AiFillAccountBook />)
}Check the full documetation in: here
the first sample:
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}can be convert as:
import { FaBeer } from 'react-icons/fa';
import { Component } from 'preact'
class Question extends Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}