https://github.com/orcunsaltik/iconism
Fonts and web assets generator from svg icons.
https://github.com/orcunsaltik/iconism
eot html json sass scss svg svg-font svg-icons svg-sprite svg-sprites ttf ttf2eot ttf2woff ttf2woff2 woff woff2
Last synced: 3 months ago
JSON representation
Fonts and web assets generator from svg icons.
- Host: GitHub
- URL: https://github.com/orcunsaltik/iconism
- Owner: orcunsaltik
- Created: 2021-01-30T14:14:31.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-21T08:45:54.000Z (about 1 year ago)
- Last Synced: 2025-03-07T08:23:18.979Z (7 months ago)
- Topics: eot, html, json, sass, scss, svg, svg-font, svg-icons, svg-sprite, svg-sprites, ttf, ttf2eot, ttf2woff, ttf2woff2, woff, woff2
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/iconism
- Size: 44.9 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.com/orcunsaltik/iconism)[](https://david-dm.org/orcunsaltik/iconism)[](https://david-dm.org/orcunsaltik/iconism?type=dev)[](https://codeclimate.com/github/orcunsaltik/iconism/maintainability)[](https://npmjs.org/package/iconism)[](https://github.com/orcunsaltik/iconism/issues)
# Iconism
A modern font and customizable asset generator in various formats by searching, optimizing and finally merging svg icon files from multiple directories or a configuration file that contains required properties.
Available Font Types: **svg, ttf, woff, woff2, eot.**
Available Assets: **html, css, scss, sass, json, svg sprite**
## Install
``` bash
npm install -g iconism
```
## Usage
### In Scripts
```js
const iconism = require('iconism');
iconism({
name: 'myicons',
input: 'src/icons/svg',
output: 'src/icons/dist',
types: ['eot', 'ttf', 'woff', 'woff2', 'svg'],
assets: ['html', 'css'],
height: 512,
descent: 64,
optimize: true,
});
// in an async function
const styler = async () => {
await iconism({
...
});
}
```
### Command-line Interface
```
iconism --help
Usage: index [options]
Convert svg icons to svg, ttf, woff, woff2 and eot font formats and generate web assets.
Options:
-v, --version output the current version
-o, --output output directory
-c, --config configuration file
-f, --fontfamily font family (default: iconfont)
-i, --id font id (default: fontfamily)
-s, --style font style (default: normal)
-W, --weight font weight (default: normal)
-a, --ascent font ascent (default: height - descent)
-d, --descent font descent (default: 0)
-h, --height font height (default: maximum glyph height)
-w, --width font width (default: auto)
-m, --metadata font metadata tag
-r, --round svg path rounding (default: 1)
-b, --begin start unicode codepoint (default:0xE000)
-t, --types font types (default: eot, woff2, woff)
-A, --assets assets (default: css, html)
-H, --hash css hash (default: true)
-T, --tag css tag (default: null)
-u, --url font directory url (default: true)
-p, --prefix css prefix class (default: i)
-S, --selector css selector (default: null)
-O, --optimize optimize svgs: svgo
-D, --debug output all information
-e, --help display help for command
```
## API
## iconism(options)
| option name | type | default | description |
| -------------- | ----------------- | ----------------------- | ---------------------------------------- |
| **`input`** | `string\|array` | **`* required`** | `svg files directories, files or config` |
| **`output`** | `string` | **`required`** | `output directory` |
| **`config`** | `string` | `null` | `configuration file path` |
| **`name`** | `string` | `iconism` | `font family` |
| **`id`** | `string` | `option.name` | `font id` |
| **`style`** | `string` | `normal` | `font style` |
| **`weight`** | `integer\|string` | `400` | `font weight` |
| **`height`** | `integer` | `highest glyphs height` | `font height` |
| **`width`** | `integer` | `auto` | `font width` |
| **`ascent`** | `integer` | `height - descent` | `font ascent` |
| **`descent`** | `integer` | `0` | `font descent` |
| **`metadata`** | `string` | `null` | `font metadata / copyright` |
| **`round`** | `integer` | `1` | `svg path rounding (0-99)` |
| **`begin`** | `integer` | `0xE000` | `first glyph unicode` |
| **`types`** | `array` | `['woff','ttf','svg']` | `font types to be generated` |
| **`assets`** | `array` | `['html','css']` | `web assets to be generated` |
| **`hash`** | `bool` | `false` | `css & font hash for cache` |
| **`tag`** | `string` | `null` | `css tag` |
| **`url`** | `string` | `null` | `font directory path in css file` |
| **`prefix`** | `string` | `i` | `css class prefix` |
| **`selector`** | `string` | `null` | `css selector` |
| **`optimize`** | `bool` | `true` | `optimize svg files` |
| **`svgo`** | `object` | `null` | `svgo options` |
| **`debug`** | `function\|bool` | `() => {}` | `output all logging info` |
All options are available except custom templates for web assets, font and asset filenames.
Configuration file "-c" option will help you provide such a file path to meet your needs.
### Input Option Examples
#### Directory
```
input: '../icons',...
```
#### Directories and files
```
input: ['../icons', '../svg/icons', 'angle-down.svg', 'add.svg'],...
```
#### Path to svg icons configuration file
```
input: '../icons/glyphs.json',...
```
#### Configuration
```
input: [
{
"name": "angle-down",
"unicode": "\uE100",
"path": "../icons/angle-down.svg"
},
{
"name": "angle-down-circle",
"unicode": "\uE101",
"path": "../icons/angle-down-circle.svg"
}
...
]
```
#### Configuration with all properties
```
input: [
{
"name": "plus",
"unicode": "\uE100",
"d": "M7,9H4V7H7V4H9V7h3V9H9v3H7Z",
"width": 512,
"height": 512,
viewPort: "0 0 512 512"
},
...
]
```
### All options separate configuration file example
```
module.exports = {
templates: {
sprite: "src/my-templates/sprite.ejs"
},
font: {
names: {
svg: "%name%-svg",
eot: "ie%name%",
},
exports: ["woff2", "woff", "ttf"]
},
asset: {
names: {
sprite: "%name%-sprite"
},
exports: ["sass", "scss", "sprite"]
},
svgo: {
plugins: [
{name: 'mergePaths', params: {force: false}},
{name: 'convertShapeToPath', params: {convertArcs: false}},
]
}
};
```
## Contributing
All contributions are welcome.
## Troubleshooting
When you encounter a problem, please open an issue. I would be glad to help you to find a solution if possible.
## Author
Orçun Saltık. Github: [@orcunsaltik](https://github.com/orcunsaltik)
## License
See the [LICENSE](LICENSE) file for license rights and limitations (MIT).