@marianmeres/icons-fns

Icon svgs from various providers wrapped as functions (with props argument) returning the icon svg string. Each icon function lives in a separate file and is typed.

All credit (and copyright) belongs to these icon providers:

• Bootstrap icons
• Boxicons
• Bytesize icons
• Feather icons
• Font Awesome Icons (Free)
• Heroicons
• Phosphoricons
• Lucide icons

Thanks for the amazing work.

Install

npm i @marianmeres/icons-fns

Usage

Each icon function is prefixed with the vendor name (and icon type where applicable):

• Bootstrap: iconBs
• Boxicons: iconBx
• Bytesize: iconBytesizeRegular, iconBytesizeSolid
• Feather: iconFeather
• Font Awesome Icons (Free): iconFaRegular, iconFaSolid
• Heroicons: iconHeroMini, iconHeroOutline, iconHeroSolid
• Phosphoricons: iconPhBold, iconPhDuotone, iconPhFill, iconPhLight, iconPhRegular, iconPhThin
• Lucide: iconLucide

Signature for all icon functions is:

iconPrefixIconName(props?: Partial<{
    size: number;
    class: string;
    style: string;
    // stroke-width is supported only for "Feather", "Bytesize" and "Lucide"
    strokeWidth: number;
}>): string;

so the actual usage example may look like:

import { iconHeroMiniAcademicCap } from '@marianmeres/icons-fns/heroicons/mini/iconHeroMiniAcademicCap.js';

const svg = iconHeroMiniAcademicCap({
	class: 'inline-block',
	size: 32,
	style: 'color: blue;',
});

// svg now contains:
// <svg class='inline-block' width="32" height="32" style="color: blue;" ... >...</svg>

All functions are typed, so your IDE should be able to typehint:

Related

• https://github.com/marianmeres/emoji-fns