{"id":18470690,"url":"https://github.com/orcunsaltik/iconism","last_synced_at":"2026-02-04T13:08:32.893Z","repository":{"id":57270956,"uuid":"334428920","full_name":"orcunsaltik/iconism","owner":"orcunsaltik","description":"Fonts and web assets generator from svg icons.","archived":false,"fork":false,"pushed_at":"2024-07-21T08:45:54.000Z","size":46,"stargazers_count":1,"open_issues_count":4,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-07T08:23:18.979Z","etag":null,"topics":["eot","html","json","sass","scss","svg","svg-font","svg-icons","svg-sprite","svg-sprites","ttf","ttf2eot","ttf2woff","ttf2woff2","woff","woff2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/iconism","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/orcunsaltik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-30T14:14:31.000Z","updated_at":"2023-02-16T08:50:11.000Z","dependencies_parsed_at":"2024-07-21T09:47:29.576Z","dependency_job_id":"570cccc5-d1bd-40ee-b509-a7cf19ebdbf4","html_url":"https://github.com/orcunsaltik/iconism","commit_stats":{"total_commits":30,"total_committers":1,"mean_commits":30.0,"dds":0.0,"last_synced_commit":"559fe5ef0f1a509fb63bdec68f3f0f98e1232f49"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orcunsaltik%2Ficonism","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orcunsaltik%2Ficonism/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orcunsaltik%2Ficonism/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orcunsaltik%2Ficonism/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/orcunsaltik","download_url":"https://codeload.github.com/orcunsaltik/iconism/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243042356,"owners_count":20226616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eot","html","json","sass","scss","svg","svg-font","svg-icons","svg-sprite","svg-sprites","ttf","ttf2eot","ttf2woff","ttf2woff2","woff","woff2"],"created_at":"2024-11-06T10:14:39.970Z","updated_at":"2026-02-04T13:08:32.886Z","avatar_url":"https://github.com/orcunsaltik.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# iconism\n\n[![CI](https://github.com/orcunsaltik/iconism/actions/workflows/ci.yml/badge.svg)](https://github.com/orcunsaltik/iconism/actions/workflows/ci.yml)\n[![npm version](https://img.shields.io/npm/v/iconism.svg)](https://www.npmjs.com/package/iconism)\n[![npm downloads](https://img.shields.io/npm/dt/iconism.svg)](https://www.npmjs.com/package/iconism)\n[![node-current](https://img.shields.io/node/v/iconism)](https://nodejs.org)\n[![license](https://img.shields.io/npm/l/iconism.svg)](LICENSE)\n\n\u003e Modern SVG icon font generator - Create TTF, WOFF, WOFF2, EOT fonts and web assets (CSS, SCSS, HTML, JSON, sprites) from SVG files with TypeScript support.\n\nA complete fonts and web assets generator that searches, optimizes, and merges SVG icon files from multiple directories or configuration files.\n\n## Features\n\n- ✅ Multiple font formats: **SVG, TTF, WOFF, WOFF2, EOT**\n- ✅ Web assets: **HTML, CSS, SCSS, SASS, JSON, SVG Sprite**\n- ✅ CLI and programmatic API\n- ✅ **TypeScript support** with complete type definitions\n- ✅ **Modern demo page** with dark mode, search, and copy-to-clipboard\n- ✅ **CSS utilities** (size, rotate, flip, spin animations)\n- ✅ **SCSS/SASS mixins** for flexible icon usage\n- ✅ SVG optimization with SVGO\n- ✅ Custom templates support\n- ✅ Unicode codepoint mapping\n- ✅ Zero configuration defaults\n\n## Requirements\n\n- Node.js \u003e= 18.0.0\n\n## Installation\n\n### Global (CLI)\n\n```bash\nnpm install -g iconism\n```\n\n### Local (API)\n\n```bash\nnpm install --save-dev iconism\n```\n\n## Usage\n\n### TypeScript\n\niconism comes with full TypeScript support:\n\n```typescript\nimport iconism, { IconismOptions } from 'iconism';\n\nconst options: IconismOptions = {\n  name: 'myicons',\n  input: 'src/icons/*.svg',\n  output: 'dist/fonts',\n  types: ['woff2', 'woff', 'ttf'],\n  assets: ['css', 'scss', 'html'],\n  optimize: true,\n};\n\nawait iconism(options);\n```\n\n### Programmatic API\n\n```javascript\nconst iconism = require('iconism');\n\n// Basic usage\niconism({\n  name: 'myicons',\n  input: 'src/icons/svg',\n  output: 'dist/fonts',\n  types: ['woff2', 'woff', 'ttf'],\n  assets: ['html', 'css'],\n  height: 512,\n  descent: 64,\n  optimize: true,\n});\n\n// Async/await\nconst generate = async () =\u003e {\n  await iconism({\n    name: 'icons',\n    input: 'icons/*.svg',\n    output: 'build',\n    types: ['woff2', 'woff'],\n    assets: ['css', 'scss'],\n  });\n  console.log('Icons generated!');\n};\n\ngenerate();\n```\n\n### Command-line Interface\n\n```bash\niconism --help\n\nUsage: iconism [options] \u003cinput path...\u003e\n\nConvert svg icons to svg, ttf, woff, woff2 and eot font formats and generate web assets.\n\nOptions:\n  -v, --version             output the current version\n  -o, --output \u003cvalue\u003e      output directory\n  -c, --config \u003cvalue\u003e      configuration file\n  -f, --fontfamily \u003cvalue\u003e  font family  (default: iconfont)\n  -i, --id \u003cvalue\u003e          font id      (default: fontfamily)\n  -s, --style \u003cvalue\u003e       font style   (default: normal)\n  -W, --weight \u003cvalue\u003e      font weight  (default: normal)\n  -a, --ascent \u003cint\u003e        font ascent  (default: height - descent)\n  -d, --descent \u003cint\u003e       font descent (default: 0)\n  -h, --height \u003cint\u003e        font height  (default: maximum glyph height)\n  -w, --width \u003cint\u003e         font width   (default: auto)\n  -m, --metadata \u003cvalue\u003e    font metadata tag\n  -r, --round \u003cint\u003e         svg path rounding (default: 1)\n  -b, --begin \u003cvalue\u003e       start unicode codepoint (default: 0xE000)\n  -t, --types \u003cvalue...\u003e    font types (default: woff2, woff, ttf)\n  -A, --assets \u003cvalue...\u003e   assets (default: css, html)\n  -H, --hash                css hash (default: false)\n  -T, --tag \u003cvalue\u003e         css tag (default: null)\n  -u, --url \u003cvalue\u003e         font directory url (default: null)\n  -p, --prefix \u003cvalue\u003e      css prefix class (default: i)\n  -S, --selector \u003cvalue\u003e    css selector (default: null)\n  -O, --optimize            optimize svgs with svgo\n  -D, --debug               output all information\n  -e, --help                display help for command\n```\n\n#### CLI Examples\n\n```bash\n# Generate fonts from directory\niconism -o dist/fonts src/icons/*.svg\n\n# Generate with specific types\niconism -o dist -t woff2 woff -A css scss src/icons/*.svg\n\n# Use configuration file\niconism -c iconism.config.js -o dist src/icons/*.svg\n```\n\n## API Reference\n\n### iconism(options)\n\n| Option         | Type              | Default                  | Description                              |\n| -------------- | ----------------- | ------------------------ | ---------------------------------------- |\n| **`input`**    | `string\\|array`   | **`* required`**         | SVG files directories, files or config   |\n| **`output`**   | `string`          | **`* required`**         | Output directory                         |\n| **`config`**   | `string`          | `null`                   | Configuration file path                  |\n| **`name`**     | `string`          | `iconism`                | Font family name                         |\n| **`id`**       | `string`          | `option.name`            | Font ID                                  |\n| **`style`**    | `string`          | `normal`                 | Font style                               |\n| **`weight`**   | `integer\\|string` | `400`                    | Font weight                              |\n| **`height`**   | `integer`         | `max glyph height`       | Font height                              |\n| **`width`**    | `integer`         | `auto`                   | Font width                               |\n| **`ascent`**   | `integer`         | `height - descent`       | Font ascent                              |\n| **`descent`**  | `integer`         | `0`                      | Font descent                             |\n| **`metadata`** | `string`          | `null`                   | Font metadata / copyright                |\n| **`round`**    | `integer`         | `1`                      | SVG path rounding (0-99)                 |\n| **`begin`**    | `integer`         | `0xE000`                 | First glyph unicode codepoint            |\n| **`types`**    | `array`           | `['woff2','woff','ttf']` | Font types to generate                   |\n| **`assets`**   | `array`           | `['html','css']`         | Web assets to generate                   |\n| **`hash`**     | `boolean`         | `false`                  | Add hash to CSS \u0026 font for cache busting |\n| **`tag`**      | `string`          | `null`                   | CSS tag                                  |\n| **`url`**      | `string`          | `null`                   | Font directory URL in CSS                |\n| **`prefix`**   | `string`          | `i`                      | CSS class prefix                         |\n| **`selector`** | `string`          | `null`                   | CSS selector                             |\n| **`optimize`** | `boolean`         | `true`                   | Optimize SVG files with SVGO             |\n| **`svgo`**     | `object`          | `null`                   | Custom SVGO options                      |\n| **`debug`**    | `function\\|bool`  | `() =\u003e {}`               | Debug logging function                   |\n\n## Input Options\n\n### Directory\n\n```javascript\niconism({\n  input: 'src/icons',\n  output: 'dist',\n});\n```\n\n### Multiple Directories and Files\n\n```javascript\niconism({\n  input: ['src/icons', 'assets/svg', 'icons/arrow.svg', 'icons/check.svg'],\n  output: 'dist',\n});\n```\n\n### JSON Configuration File\n\n```javascript\niconism({\n  input: 'icons/config.json',\n  output: 'dist',\n});\n```\n\n**icons/config.json:**\n\n```json\n[\n  {\n    \"name\": \"arrow-down\",\n    \"unicode\": \"\\uE100\",\n    \"path\": \"icons/arrow-down.svg\"\n  },\n  {\n    \"name\": \"arrow-up\",\n    \"unicode\": \"\\uE101\",\n    \"path\": \"icons/arrow-up.svg\"\n  }\n]\n```\n\n### Enhanced JSON Output\n\nWhen generating JSON assets, you get rich metadata:\n\n```json\n{\n  \"name\": \"myicons\",\n  \"version\": \"1.0.0\",\n  \"prefix\": \"i\",\n  \"icons\": {\n    \"arrow-down\": {\n      \"unicode\": 57600,\n      \"hex\": \"e100\",\n      \"character\": \"\",\n      \"className\": \"i-arrow-down\"\n    },\n    \"arrow-up\": {\n      \"unicode\": 57601,\n      \"hex\": \"e101\",\n      \"character\": \"\",\n      \"className\": \"i-arrow-up\"\n    }\n  }\n}\n```\n\n### Inline Configuration\n\n```javascript\niconism({\n  input: [\n    {\n      name: 'plus',\n      unicode: '\\uE100',\n      d: 'M7,9H4V7H7V4H9V7h3V9H9v3H7Z',\n      width: 512,\n      height: 512,\n      viewBox: '0 0 512 512',\n    },\n    {\n      name: 'minus',\n      unicode: '\\uE101',\n      path: 'icons/minus.svg',\n    },\n  ],\n  output: 'dist',\n});\n```\n\n## Advanced Configuration\n\n### CSS Utilities\n\nGenerated CSS includes helpful utility classes:\n\n```css\n/* Size utilities */\n.i-sm {\n  font-size: 0.75em;\n}\n.i-lg {\n  font-size: 1.25em;\n}\n.i-xl {\n  font-size: 1.5em;\n}\n.i-2x {\n  font-size: 2em;\n}\n.i-3x {\n  font-size: 3em;\n}\n\n/* Rotate utilities */\n.i-rotate-90 {\n  transform: rotate(90deg);\n}\n.i-rotate-180 {\n  transform: rotate(180deg);\n}\n.i-rotate-270 {\n  transform: rotate(270deg);\n}\n\n/* Flip utilities */\n.i-flip-horizontal {\n  transform: scaleX(-1);\n}\n.i-flip-vertical {\n  transform: scaleY(-1);\n}\n```\n\n**Usage:**\n\n```html\n\u003cspan class=\"i i-arrow-down i-2x i-rotate-90\"\u003e\u003c/span\u003e\n```\n\n### SCSS Mixins\n\nGenerated SCSS includes powerful mixins:\n\n```scss\n// Use icon by name\n.my-button {\n  @include icon('arrow-down');\n  @include icon-size(1.5rem);\n  @include icon-rotate(45);\n}\n\n// Flip icon\n.back-button {\n  @include icon('arrow-right');\n  @include icon-flip(horizontal);\n}\n\n// Spin animation\n.loading-icon {\n  @include icon('spinner');\n}\n.loading-icon.i-spin {\n  animation: i-spin 2s linear infinite;\n}\n```\n\n### Modern Demo Page\n\nThe generated HTML demo includes:\n\n- 🌙 **Dark mode** with persistent preference\n- 🔍 **Real-time search** - Filter icons instantly\n- 📋 **Copy to clipboard** - Click any icon to copy its class name\n- 📱 **Responsive design** - Works on all devices\n- ⌨️ **Keyboard shortcuts** - `/` to search, `Esc` to clear\n- 📊 **Live stats** - See total and visible icon counts\n- 🎨 **Grid/List views** - Toggle between layouts\n\n## Advanced Configuration\n\nCreate an `iconism.config.js` file for advanced options:\n\n```javascript\nmodule.exports = {\n  name: 'custom-icons',\n  input: 'src/icons',\n  output: 'dist/fonts',\n  types: ['woff2', 'woff', 'ttf'],\n  assets: ['sass', 'scss', 'sprite'],\n  templates: {\n    sprite: 'templates/sprite.ejs',\n  },\n  font: {\n    names: {\n      svg: '%name%-svg',\n      woff2: '%name%-webfont',\n    },\n    exports: ['woff2', 'woff', 'ttf'],\n  },\n  asset: {\n    names: {\n      sprite: '%name%-sprite',\n    },\n    exports: ['sass', 'scss', 'sprite'],\n  },\n  svgo: {\n    plugins: [\n      { name: 'mergePaths', params: { force: false } },\n      { name: 'convertShapeToPath', params: { convertArcs: false } },\n    ],\n  },\n};\n```\n\nThen run:\n\n```bash\niconism -c iconism.config.js\n```\n\n## Changelog\n\n### v2.0.1 (2025)\n\n- 🚀 Updated SEO-friendly package description\n- 🚀 Enhanced keywords for better discoverability\n- 📚 Updated README with improved formatting\n\n### v2.0.0 (2024)\n\n#### 🚨 Breaking Changes\n\n- **BREAKING:** Requires Node.js 18+\n\n#### ✨ New Features\n\n- **TypeScript Support:** Complete type definitions (`iconism.d.ts`)\n- **Modern Demo Page:**\n  - Dark mode with localStorage persistence\n  - Real-time icon search and filtering\n  - Copy to clipboard functionality\n  - Grid and list view toggles\n  - Keyboard shortcuts (`/` for search, `Esc` to clear)\n  - Live icon statistics\n  - Responsive mobile-first design\n- **CSS Utilities:** Size, rotate, flip, and spin animations\n- **SCSS/SASS Mixins:** `@include icon()`, `@include icon-size()`, `@include icon-rotate()`, `@include icon-flip()`\n- **Enhanced JSON Output:** Rich metadata with unicode, hex, character, and className\n\n#### 🐛 Bug Fixes\n\n- **CRITICAL:** Fixed SVG sprite closing tag bug (`\u003csvg\u003e` → `\u003c/svg\u003e`)\n- Fixed 87 ESLint issues across the codebase\n- Fixed async Promise executor anti-patterns (7 instances)\n- Fixed path concatenation issues (8 instances, now using `path.join()`)\n- Fixed tab/space inconsistencies (50+ instances)\n- Fixed mixed operator precedence issues (6 instances)\n\n#### 📦 Dependency Updates\n\n- Updated njfs: 1.2.5 → 2.0.0\n- Updated svg2ttf: 5.1.0 → 6.0.3\n- Updated ttf2eot: 2.0.0 → 3.1.0\n- Updated ttf2woff: 2.0.2 → 3.0.0\n- Updated ttf2woff2: 4.0.2 → 5.0.0\n- Updated svgo: 2.2.2 → 2.8.0\n- Updated ejs: 3.1.6 → 3.1.10\n- Updated xml2js: 0.4.23 → 0.6.2\n\n#### 🔧 Development\n\n- Added Prettier for consistent code formatting\n- Modern ESLint 8 configuration with standard config\n- Travis CI → GitHub Actions (Node 18/20/22)\n- Added `.vscode/settings.json` for better IDE support\n- Comprehensive `.prettierrc` and `.editorconfig`\n\n#### 📚 Documentation\n\n- Completely rewritten README with modern examples\n- Added TypeScript usage examples\n- Added CSS utilities documentation\n- Added SCSS mixins documentation\n- Added demo page features documentation\n- Updated badges (CI, npm version, downloads)\n\n### v1.2.3 (2021)\n\n- Previous stable release\n\n## Migration from v1.x\n\n```javascript\n// v1.x - Still works in v2.x\niconism({\n  input: 'icons',\n  output: 'dist',\n});\n\n// v2.x - Now requires Node.js 18+\n// All other APIs remain the same\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## Troubleshooting\n\nWhen you encounter a problem, please [open an issue](https://github.com/orcunsaltik/iconism/issues).\n\n## Author\n\n**Orçun Saltık**\n\n- GitHub: [@orcunsaltik](https://github.com/orcunsaltik)\n- Email: saltikorcun@gmail.com\n\n## License\n\n[MIT](LICENSE) © Orçun Saltık\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forcunsaltik%2Ficonism","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forcunsaltik%2Ficonism","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forcunsaltik%2Ficonism/lists"}