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
Thanks for the amazing work.
npm i @marianmeres/icons-fnsEach 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
Signature for all icon functions is:
iconPrefixIconName(props?: Partial<{
size: number;
class: string;
style: string;
// stroke-width is supported only for "Feather" and "Bytesize"
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:
