@geomatika/fonts

v0.1.2

Published

3 months ago

256+ GIS-focused icon fonts with 3 usage modes (NPM, Embedded, CDN) - Font Awesome style for geographic applications

Downloads

0High
0Medium
0Low

t1geomatika

dumaietienne

isigeo

icons icon-font gis map geospatial isigeo fonts svg embedded cdn font-awesome typescript

@geomatika/fonts

IsiGéo icon library with 256+ custom icons. Works like Font Awesome with 3 usage modes.

📦 Installation

npm install @geomatika/fonts

🎯 Usage Modes

1️⃣ NPM Local (Default - relative paths)

Best for: Vite/Webpack projects with asset bundling.

import '@geomatika/fonts/isigeo-icons.css';

<i class="icon icon-geo"></i>
<i class="icon icon-map"></i>
<i class="icon icon-layers"></i>

How it works: CSS references fonts/isigeo.woff with relative paths. Your bundler copies font files.

2️⃣ Embedded (Recommended - no external files) ⭐

Best for: Simple projects, component libraries, or when you want zero HTTP requests for fonts.

import '@geomatika/fonts/isigeo-icons-embedded.css';

<i class="icon icon-geo"></i>

How it works: CSS contains base64-encoded fonts (data URIs). No separate font files needed!

✅ Advantages:

Works everywhere (no file path issues)
Single HTTP request (CSS only)
No build config needed
Perfect for component libraries

⚠️ Trade-off: CSS file is ~200 KB instead of ~16 KB (but you save 3 font file requests ~140 KB total)

3️⃣ CDN (External resource - like Font Awesome)

Best for: Quick prototypes, static HTML, or projects without npm.

<!-- From unpkg CDN -->
<link rel="stylesheet" href="https://unpkg.com/@geomatika/fonts@latest/dist/isigeo-icons-cdn.css">

<i class="icon icon-geo"></i>

How it works: CSS loads fonts from unpkg CDN. No npm install needed!

✅ Advantages:

Zero installation
Browser caching across sites
Always latest version (use @0.1.1 for pinned version)

⚠️ Trade-off: Requires internet connection, external dependency.

🔤 Available Icons (256+)

<!-- Navigation -->
<i class="icon icon-home"></i>
<i class="icon icon-menu"></i>
<i class="icon icon-search"></i>

<!-- Map -->
<i class="icon icon-geo"></i>
<i class="icon icon-map-solid"></i>
<i class="icon icon-layers"></i>
<i class="icon icon-pin"></i>
<i class="icon icon-target"></i>

<!-- Actions -->
<i class="icon icon-save"></i>
<i class="icon icon-trash-alt"></i>
<i class="icon icon-pencil-alt"></i>
<i class="icon icon-copy"></i>

<!-- Files -->
<i class="icon icon-pdf"></i>
<i class="icon icon-csv"></i>
<i class="icon icon-gpx"></i>
<i class="icon icon-kml"></i>

<!-- Tools -->
<i class="icon icon-measure-line"></i>
<i class="icon icon-measure-area"></i>
<i class="icon icon-draw"></i>
<i class="icon icon-filter"></i>

<!-- And 230+ more... -->

See full list: Run npm run generate:icons to create src/icon-list.ts

📖 Examples

Example 1: Vite + TypeScript (NPM mode)

// main.ts
import '@geomatika/fonts/isigeo-icons.css';

document.body.innerHTML = `
  <div>
    <i class="icon icon-geo"></i> Map
    <i class="icon icon-layers"></i> Layers
  </div>
`;

Example 2: Component Library (Embedded mode) ⭐

// MyComponent.ts
import '@geomatika/fonts/isigeo-icons-embedded.css';

export class MyComponent {
  render() {
    return `<button><i class="icon icon-save"></i> Save</button>`;
  }
}

Why embedded? Your component works anywhere without font file dependencies!

Example 3: Static HTML (CDN mode)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/@geomatika/fonts@latest/dist/isigeo-icons-cdn.css">
</head>
<body>
  <h1><i class="icon icon-geo"></i> IsiGéo</h1>
  <p><i class="icon icon-map-solid"></i> Geographic Information System</p>
</body>
</html>

🛠️ TypeScript API

The library also provides TypeScript helpers for programmatic icon creation:

Creating Icons

import { createIcon, createIconButton } from '@geomatika/fonts';
import '@geomatika/fonts/isigeo-icons-embedded.css';

// Create a simple icon element
const homeIcon = createIcon('home');
document.body.appendChild(homeIcon);

// Create an icon with additional classes
const menuIcon = createIcon('menu', 'text-primary fs-4');

Creating Icon Buttons

import { createIconButton } from '@geomatika/fonts';

const button = createIconButton('save', {
  className: 'btn btn-primary',
  title: 'Save Document',
  ariaLabel: 'Save the current document',
  onClick: () => {
    console.log('Save clicked');
  }
});

document.body.appendChild(button);

API Reference

createIcon(iconName, className?) - Creates an icon element
createIconButton(iconName, options?) - Creates a button with icon
addIcon(element, iconName, className?) - Adds icon to element
replaceWithIcon(element, iconName, className?) - Replaces content with icon
hasIcon(element, iconName?) - Checks if element contains icon

🔧 Custom Styling

/* Change icon color */
.icon {
  color: #007bff;
}

/* Change icon size */
.icon-large {
  font-size: 2rem;
}

/* Rotate icon */
.icon-rotate {
  transform: rotate(45deg);
}

/* Spinning icon (loading) */
.icon-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

📝 Lists with Icons (Font Awesome style)

Use icons as list bullets with .icon-ul and .icon-li:

<ul class="icon-ul">
  <li>
    <span class="icon-li"><i class="icon icon-check"></i></span>
    Task completed
  </li>
  <li>
    <span class="icon-li"><i class="icon icon-warning"></i></span>
    Warning message
  </li>
  <li>
    <span class="icon-li"><i class="icon icon-info"></i></span>
    Information note
  </li>
</ul>

Result:

✓ Task completed
⚠ Warning message
ℹ Information note

Utility Classes

.icon-ul - Apply to <ul> element (removes default bullets, adds spacing)
.icon-li - Apply to <span> wrapper around icon (positions icon as bullet)

🛠️ Development

# Generate icon list (TypeScript)
npm run generate:icons

# Generate embedded + CDN CSS variants
npm run generate:css

# Build all (TypeScript + Vite + CSS variants)
npm run build

# Clean build output
npm run clean

# Watch mode
npm run dev

📦 Package Exports

{
  "exports": {
    ".": "./dist/index.js",                               // TypeScript API
    "./isigeo-icons.css": "./dist/isigeo-icons.css",     // NPM mode
    "./isigeo-icons-embedded.css": "./dist/isigeo-icons-embedded.css", // Embedded ⭐
    "./isigeo-icons-cdn.css": "./dist/isigeo-icons-cdn.css",           // CDN
    "./fonts/*": "./dist/fonts/*"                         // Font files
  }
}

📄 License

🆚 Comparison with Font Awesome

| Feature | Font Awesome | @geomatika/fonts | |---------|--------------|------------------| | NPM install | ✅ Yes | ✅ Yes | | CDN link | ✅ Yes | ✅ Yes | | Embedded mode | ❌ No | ✅ Yes ⭐ | | Icons count | 2000+ (general) | 256+ (GIS-focused) | | Bundle size | ~900 KB | ~200 KB embedded | | TypeScript API | ❌ No | ✅ Yes |

Key Advantage: The embedded mode works perfectly in component libraries without any font file dependency or build configuration!

🚀 Quick Start (3 ways)

Way 1: NPM (Vite/Webpack)

npm install @geomatika/fonts

import '@geomatika/fonts/isigeo-icons.css';

Way 2: Embedded (Component Libraries) ⭐

import '@geomatika/fonts/isigeo-icons-embedded.css';
// No font files needed!

Way 3: CDN (No install)

<link rel="stylesheet" href="https://unpkg.com/@geomatika/fonts@latest/dist/isigeo-icons-cdn.css">

Made with ❤️ by Géomatika for GIS applications

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@geomatika/fonts

📦 Installation

🎯 Usage Modes

1️⃣ NPM Local (Default - relative paths)

2️⃣ Embedded (Recommended - no external files) ⭐

3️⃣ CDN (External resource - like Font Awesome)

🔤 Available Icons (256+)

📖 Examples

Example 1: Vite + TypeScript (NPM mode)

Example 2: Component Library (Embedded mode) ⭐

Example 3: Static HTML (CDN mode)

🛠️ TypeScript API

Creating Icons

Creating Icon Buttons

API Reference

🔧 Custom Styling

📝 Lists with Icons (Font Awesome style)

Utility Classes

🛠️ Development

📦 Package Exports

📄 License

🆚 Comparison with Font Awesome

🚀 Quick Start (3 ways)

Way 1: NPM (Vite/Webpack)

Way 2: Embedded (Component Libraries) ⭐

Way 3: CDN (No install)