Best Nodejs Package Hicons for HugoGo: Effortless SVG Icon Management

SVG icons are a staple of modern web design, but managing them in static site generators like Hugo can be tedious. If you’ve ever found yourself manually copying SVG code, worrying about layout bloat, or struggling to keep your icons up-to-date, Hicons is about to transform your workflow.

What Is Hicons?

Hicons is a Hugo plugin that automates SVG icon management by scanning your layouts, fetching only the icons you use, and updating your partials with minified, production-ready SVGs from open-source libraries like Lucide and Feather. The result? Clean, efficient, and maintainable icon usage—without the hassle.

Key Features

• Auto-Detection: Scans your Hugo layouts for icon usage and automatically fetches SVGs.
• Lean Output: Only includes the icons you actually use, keeping your HTML clean.
• Minified SVGs: Inserts production-ready SVG code, optimized for fast loading.
• Safe Merging: Existing icons in your partial are preserved—no accidental overwrites.
• Custom Styling: Pass Tailwind or custom CSS classes directly to your icons.
• Live Updates: Watch mode keeps icons in sync as you develop.
• Instant Icon Picker: Use the dedicated Hicons website to search, preview, and copy Hugo-ready code.

Why Use Hicons?

Copy-pasting SVGs by hand can lead to bloated layouts, duplicate code, and maintenance headaches. Hicons solves these problems:

• No More Manual Copy-Paste: Just call your icon by name; Hicons handles the SVG.
• Automatic Partial Updates: All icons live in a single partial, auto-generated and updated.
• Perfect for Tailwind: Easily apply utility classes or custom styles.
• Safe for Production: No more forgotten or unused SVGs weighing down your pages.

How It Works

1. Scan Layouts: Hicons recursively scans your Hugo layout files for icon partial calls like:

   {{ partial "icons.html" (dict "name" "mail" "class" "w-6 h-6") }}
   

2. Extract Icon Names: It identifies each unique icon requested.
3. Fetch SVGs: Retrieves the relevant SVGs from Lucide (and Feather, soon).
4. Update/Merge Partial: Inserts or merges SVGs into your icons.html or _partials/icons.html. Old icons are kept, new ones added, and duplicates skipped.
5. Watch Mode: Optionally, Hicons can watch your layouts and update icons in real-time as you work.

Getting Started

1. Installation

Install globally:

npm install hicons

Or use npx for instant, zero-install usage:

npx hicons

2. Pick Your Icons

Visit the Hicons website:

• Search for the icon you need (e.g., mail, sparkles)
• Click or copy the Hugo layout code, e.g.:

  {{ partial "icons.html" (dict "name" "sparkles" "class" "w-6 h-6 text-pink-500") }}
  

• Paste it into your Hugo template.

3. Generate or Update Your Partials

Run Hicons to scan layouts and update your icon partial:

hicons

Or enable live updates during development:

hicons --watch & hugo server -D

Hicons will:

• Watch all layouts/**/*.html files
• Update the partial when icon usage changes
• Merge new icons safely, skipping duplicates

Example Workflow

Add these scripts to your package.json for streamlined dev and build processes:

{
  "scripts": {
    "dev": "hicons --watch & hugo server -D",
    "build": "hicons && hugo --minify"
  }
}

Now just run:

npm run dev

• As you edit layouts, new icons are detected and merged.
• Hugo’s server reloads automatically for a smooth workflow.

Advanced: Icon Styling

All icons default to 24×24 size and stroke="currentColor". Style them with Tailwind classes or your own CSS:

{{ partial "icons.html" (dict "name" "heart" "class" "w-8 h-8 text-red-500") }}

Partial File Location

Supported partial paths:

• layouts/partials/icons.html
• layouts/_partials/icons.html

If neither file exists, Hicons will create layouts/_partials/icons.html automatically.

Internals & Safety

• Uses Lucide’s official SVG set (Feather support planned)
• Never overwrites existing icons—merges safely
• Prevents duplicates
• Logs new and missing icons for transparency

Optional & Planned Flags

FAQ

What if I add or remove icons?
Just re-run npx hicons (or keep watch mode active). Hicons will add new icons and keep existing ones safe.

Do I need to manually update my SVGs?
No. Hicons fetches and updates all SVGs for you.

Can I use custom icon sets?
Currently, Hicons focuses on Lucide; Feather and custom set support are planned.

License

MIT

Ready to simplify your SVG workflow? Try Hicons and enjoy effortless Hugogo icon management!