Custom Icons SMZI

Installation

Install the package via npm:

npm install custom-icons-smzi

Setup To use the icons, you must import the library's CSS file into your project's main entry point (e.g., index.js, main.ts, or App.tsx):

// Global import in your React/Vue/Next.js entry file
import 'custom-icons-smzi/dist/icons.css';

Usage Monochrome Icons (Default) Monochrome icons act as stencils. They inherit the color of their parent element or their own style property. Default size is icon-sm

<i class="icon-phone"></i>
<i class="icon-phone" style="color: #38bdf8;"></i>
<i class="icon-phone icon-sm"></i>
<i class="icon-phone icon-md"></i>
<i class="icon-phone icon-lg"></i>

Icon Sizes

.icon-xs, .c-icon-xs { width: 20px !important; height: 20px !important; }
.icon-sm, .c-icon-sm { width: 24px !important; height: 24px !important; }
.icon-md, .c-icon-md { width: 32px !important; height: 32px !important; }
.icon-lg, .c-icon-lg { width: 64px !important; height: 64px !important; }
.icon-xl, .c-icon-xl { width: 70px !important; height: 70px !important; }

Multi-color Icons Icons prefixed with c- (e.g., c-google.svg) preserve their original SVG colors and do not respond to the CSS color property.

<i class="c-icon-google"></i>

Developing & Adding Icons If you want to update the library with new icons:

• Add SVGs: Drop your .svg files into the /assets directory.
  • Standard: Name them normally (e.g., user.svg) for monochrome tinting.
  • Colored: Prefix with c- (e.g., c-paypal.svg) to keep internal colors.
• Run Build: Process the icons to generate the CSS and the gallery.

npm run build

Preview: Open dist/index.html in your browser to view the interactive gallery, search for icons, and copy the className.

Why Use This?

• Zero FOUC: No "Flash of Unstyled Content" or SVG loading delays.
• Fully Tintable: Change icon colors on :hover, :active, or via Themes using only CSS.
• Sharpness: Icons remain crisp at any zoom level or screen density.