Are you tired of the same old static favicons? Do you want to add a personal touch to your web applications? Introducing Faviconify, a customizable React npm library that lets you dynamically generate favicons on the fly!
๐ What is Faviconify?
Faviconify is a simple yet powerful React npm library that allows you to set text-based favicons or use your own custom PNG/SVG images. It's perfect for developers looking to create unique, dynamic favicons with ease.
๐ Key Features
- Customizable Text Favicon: Generate favicons with custom text, font, and colors.
- Shape Options: Choose between circle, square, and rounded square shapes.
- Custom Image Favicon: Use a PNG or SVG image as your favicon.
- Easy Integration: Simply drop the Faviconify component into your React app and you're good to go!
๐ฆ Installation
You can easily install Faviconify using npm or yarn:
npm install faviconify
or
yarn add faviconify
๐ป Usage Examples
Here's how you can start using Faviconify in your React application.
Example 1: Text-Based Favicon
import React from 'react';
import Faviconify from 'faviconify';
const App = () => {
return (
<>
<Faviconify textContent="M" iconShape="rounded" fontWeight="900" />
<h1>Welcome to My App!</h1>
</>
);
};
export default App;
Example 2: Using a Custom Image as Favicon
import React from 'react';
import Faviconify from 'faviconify';
import IconUrl from './path/to/your/favicon.svg'; // Ensure this is a URL, not a React component
const App = () => {
return (
<>
<Faviconify imageUrl={IconUrl} iconShape="rounded" />
<h1>Welcome to My App!</h1>
</>
);
};
export default App;
๐ ๏ธ Props
Here are the props you can customize to tailor the Faviconify component to your needs:
Prop | Type | Default | Description |
---|---|---|---|
fontFamily |
string | Arial |
Font family used for text content. |
textColor |
string | #FFF |
Color of the text in the favicon. |
bgColor |
string | #000 |
Background color of the favicon. |
iconShape |
'circle' \ | 'square' \ | 'rounded' |
fontWeight |
string | 400 |
Font weight of the text content. |
textSize |
number | 200 |
Size of the text in the favicon (in pixels). |
textContent |
string | S |
Text content to be displayed in the favicon. |
imageUrl |
string | undefined |
URL of the image to be used as a favicon. Overrides text. |
๐ Why Faviconify?
Favicons are an important part of your web application's branding, and with Faviconify, you can take them to the next level. Whether you want to create a dynamic favicon that changes based on user interaction or simply want a more personalized icon, Faviconify makes it easy.
Top comments (0)