Welcome to heroicons-lookup
🔍
A utility library to lookup TailwindCSS Heroicons by their name. Based on @jsmith's gist
🏠
Homepage
✨
Demo(coming soon)
Use cases
Say for example, you store in database, entities that have an icon. The intuitive thing to do is to store the name of the icon in the database. Another example could be a situacion where you want to change the icon based on the user input, or based on certain conditions.
If you need to import an icon dynamically based on it's name, you can with this library. By using the function below, you can obtain exactly the icon you want, as react component.
Install
npm install heroicons-lookup
Usage
import {lookupIcon} from "heroicons-lookup";
const ExampleComponent = ({iconName="ArrowLeftIcon"}: {iconName: string}) => {
const Icon = lookupIcon(iconName, "solid")
return (
<Icon className="flex h-5 w-5"/>
)
}
Documentation
lookupIcon(iconName: string, format: "outline"|"solid")
Finds an icon element with the name indicated (if any). Throws an error if not found.
Author
- Website: https://github.com/naquiroz/heroicons-lookup#readme
- Twitter: @naquiroz_
- Github: @naquiroz
- LinkedIn: @naquiroz
🤝
Contributing
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
Show your support
Give a
📝
License
Copyright © 2022 Nicolas Quiroz [email protected].
This project is MIT licensed.
This README was generated with
Update contributing instructions
Hey, I wanted to update the package to include some new icons (or their new names), which I have done in https://github.com/naquiroz/heroicons-lookup/pull/2
But I found the contributing instructions hard to follow, lots of the info in the template doesn't seem to match this project. I wasn't sure what direction you might want to switch (e.g. eslint vs prettier vs whatever) so I haven't made any changes directly.
The parts I spotted:
npmwhere I assume it meansnpm install?npm run lintbut that command doesn't work. It's defined aseslint srcbut needs to be something likeeslint src/**/*.ts. But switching to that just makes eslint complain that there's no config file.npx prettier -w srcin case that's useful to include.Update to use Heroicons 2.0.13
Updates heroicons-lookup to use the latest heroicons/react
This adds the following new icons:
And removes the following old icons (mostly renamed into the above list as far as I could see)
Closes #1