Documentation

CDSFM Docs

Everything you need to integrate CDSFM icon packages into your projects.

Getting Started

Learn how to purchase and download your first icon package.

Quick Start Guide License Overview

NPM Integration

Install and use CDSFM icon packages directly from npm.

NPM Installation Tree-shaking Guide

React Components

Use pre-built React components with full TypeScript support.

React Usage TypeScript Types

Quick Start

After purchasing a package, you'll receive a ZIP file containing the following structure:

essential-pack-v2.0.0/
├── svg/           # Source SVG files
│   ├── arrow-up.svg
│   └── ...
├── png/           # PNG exports
│   ├── 16px/
│   ├── 24px/
│   ├── 32px/
│   └── ...
├── font/          # Icon font files
│   ├── cdsfm.ttf
│   ├── cdsfm.woff
│   └── cdsfm.woff2
├── react/         # React components
│   ├── index.tsx
│   └── types.d.ts
└── css/
    └── cdsfm.css  # CSS class names

NPM Installation

Install via npm, yarn, or pnpm:

$ npm install @cdsfm/essential-icons
$ yarn add @cdsfm/essential-icons
$ pnpm add @cdsfm/essential-icons

React Usage

Import individual icons as React components:

import { ArrowUp, User, Cart } from '@cdsfm/essential-icons'
// Use in JSX
export default function MyComponent() {
  return (
    <button>
      <Cart size={24} color="currentColor" />
      Add to Cart
    </button>
  )
}

TypeScript Types

All components ship with full TypeScript definitions:

interface IconProps {
  size?: number | string    // default: 24
  color?: string            // default: 'currentColor'
  strokeWidth?: number      // default: 1.5
  className?: string
  style?: React.CSSProperties
}

Tree Shaking

CDSFM packages are fully tree-shakeable. Only import what you use and your bundle will only include those icons:

// ✓ Good — only ArrowUp is bundled
import { ArrowUp } from '@cdsfm/essential-icons'
// ✗ Avoid — imports entire library
import * as Icons from '@cdsfm/essential-icons'