NPM Guide

Using CDSFM via NPM

CDSFM packages are available on npm. Note that buying direct here saves up to 40% — the icon files are identical.

@cdsfm/essential-icons

Essential Pack

150 icons

v2.1.0
@cdsfm/ecommerce-icons

E-Commerce Pack

200 icons

v1.2.0
@cdsfm/pro-icons

Pro Pack

520 icons

v1.5.0
1

Install

# Pick your package
npm install @cdsfm/essential-icons
# or
yarn add @cdsfm/pro-icons
# or
pnpm add @cdsfm/ecommerce-icons
2

Import & Use

import { ArrowUp, Mail, ShoppingCart } from '@cdsfm/essential-icons'

export default function MyButton() {
  return (
    <button className="flex items-center gap-2">
      <ShoppingCart size={20} />
      Add to Cart
    </button>
  )
}
3

Tree Shaking

// ✓ Only ArrowUp is bundled
import { ArrowUp } from '@cdsfm/essential-icons'

// ✗ Imports entire library
import * as Icons from '@cdsfm/essential-icons'

TypeScript Props

interface IconProps {
  size?:        number | string  // default: 24
  color?:       string           // default: 'currentColor'
  strokeWidth?: number           // default: 1.5
  className?:   string
  style?:       React.CSSProperties
  onClick?:     () => void
}

Why buy direct?

  • Save up to 40% vs NPM price
  • Identical files — same quality, lower cost
  • Supports CDSFM development directly
  • Instant download, no npm token required