React icon components created from SVG files.
Galeicons is a lightweight React library that offers a collection of icon components crafted from SVG files. It provides a simple and efficient way to breeze icons into your React projects.
-
Simple and Lightweight
-
Clean SVG Attributes The SVG attributes are designed to be clean and easy to work with, making customization straightforward.
-
TypeScript Compatibility Galeicons is compatible with TypeScript, providing auto-suggestions and intelligent code completion for a smoother development experience.
-
Initial Inspiration from Heroicons The initial set of icons is based on the popular icon library Heroicons. You can explore Heroicons here.
-
Future Expansions: Galeicons is dedicated to continuous growth and will be expanding its icon collection in future updates.
Install gale-icons
from npm:
npm install gale-icons
Using Galeicons in your React components is a breeze. Import the icon component and include it in your JSX/TSX. Customize the icon's appearance by applying CSS classes or passing SVG element attributes.
Here's a basic example of how to use Galeicons:
If no custom attributes are passed, you'll get a default 24x24px icon with the color based on your project's current color
import React from 'react'
import { GaleOIconHeartHi } from 'gale-icons'
function App() {
return (
<div>
<h1>Welcome to Galeicons!</h1>
<GaleOIconHeartHi />
</div>
)
}
export default App
🎉 Now you have a beautiful heart icon in your React project.
import React from 'react'
import { GaleOIconHeartHi } from 'gale-icons'
function App() {
return (
<div>
<h1>Welcome to Galeicons!</h1>
<GaleOIconHeartHi width='32' height='32' stroke='yellow' />
</div>
)
}
export default App
Pass SVG attributes like "width" and "height" to customize the size. The "stroke" color attribute will override class color, but width and height won't.
import React from 'react'
import { GaleOIconHeartHi } from 'gale-icons'
function App() {
return (
<div>
<h1>Welcome to Galeicons!</h1>
<GaleOIconHeartHi className='h-8 w-8 text-blue-900' />
{/* Use CSS classes to change the style. Here are Tailwind CSS classes for an 8x8 size (32px) and dark blue color. */}
</div>
)
}
export default App
Galeicons is created with ❤️ by Maeve Du.