search

Workshape / icon-font-generator

Easy-to-use, pre-configured cli tool to generate webfont icon kits from a bunch of .svg files
MIT License
471 stars 76 forks source link

Any plans for Ligature's ? #12

Open the-real-adammork opened 7 years ago

the-real-adammork commented 7 years ago

Wondering if this is in the works or been considered previously. Thanks

tancredi commented 7 years ago

Hi @the-real-adammork - can you expand on this please? :)

the-real-adammork commented 7 years ago

Ligatures is a font feature that traditionally collapses 'ae' or 'fi' from two characters to one. It can be used to collapse 'facebook' to one character. Takes alot of pain out of the process because you dont need to templatize the unicode characters after compiling the icon font.

I ended up grabbing the latest version of https://github.com/sunflowerdeath/webfonts-generator and ligature support is included. I call it directly and this solved my issue.

tancredi commented 7 years ago

No reason to close this - I would still consider implementing it on this repo as well

the-real-adammork commented 7 years ago

Ok, and you sit ontop of webfonts-generator so it should be pretty straightforward. Ill try and take a crack at it later today.

*didnt mean to close

tancredi commented 7 years ago

That would be great, I'm gonna struggle finding time to look at it for a few days - just make sure to test that it works if you wanna open a pull request - thanks :)

Kaishiyoku commented 6 years ago

How is the status of this feature request?

BrunnerLivio commented 4 years ago

I was able to work around this! Seems like the underlying library webfonts-generator by @sunflowerdeath has added support for ligatures a long time ago. Unfortunately, the author of the repository forgot to update the package on NPM. The repository is now read-only and therefore we can't submit issues for that. To work around this, we can use a specific commit of the Github repository in NPM like so

package.json

{
  "dependencies": {
     "webfonts-generator": "sunflowerdeath/webfonts-generator#ed306cd"
  }
}

In order to correctly reference your icon font, you must use a custom CSS template. (Inspired by Material Design Icons)

template/css.hbs

@font-face {
  font-family: "{{ fontName }}";
  font-style: normal;
  font-weight: 400;
  src: {{{ src }}};
}

{{ baseSelector }} {
  font-family: "{{ fontName }}";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: pre;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

template/html.hbs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ fontName }}</title>

    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 10px 20px;
            text-align: center;
        }
        .preview {
            width: 100px;
            display: inline-block;
            margin: 10px;
        }
        .preview .inner {
            display: inline-block;
            width: 100%;
            text-align: center;
            background: #f5f5f5;
            -webkit-border-radius: 3px 3px 0 0;
            -moz-border-radius: 3px 3px 0 0;
            border-radius: 3px 3px 0 0;
        }
        .preview .inner {{ baseTag }} {
            line-height: 85px;
            font-size: 40px;
            color: #333;
        }
        .label {
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            padding: 5px;
            font-size: 10px;
            font-family: Monaco, monospace;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: #ddd;
            -webkit-border-radius: 0 0 3px 3px;
            -moz-border-radius: 0 0 3px 3px;
            border-radius: 0 0 3px 3px;
            color: #666;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="{{ htmlCssRelativePath }}" />
</head>
<body>

    <h1>{{ fontName }}</h1>

    {{# each names }}

        <div class="preview">
            <span class="inner">
                <{{ ../baseTag }} class="{{ ../baseClassNames }}">{{ this }}</{{ ../baseTag }}>
            </span>
            <br>
            <span class="label">{{ this }}</span>
        </div>

    {{/ each }}

</body>
</html>

I execute it like this

icon-font-generator --htmltp template/html.hbs \
  --csstp template/css.hbs \
  -o dist \
  icons/*.svg

From icon-font-generator side of things, I would love to see a --ligature parameter, which will simply use the CSS and HTML template from above. For us using a Github dependency is fine, but I do not know what @tancredi would think of that for this repository? The best option would be of course, to fork and maintain @sunflowerdeath repository, so we could reference an NPM package instead of a Github reference, though I do not know whether you have the capacity for that.

manland commented 4 years ago

Hi, thanks for the tip to make it work with liga!

But the woff and woff2 generated haven't ligature for tools other tan web (desktop, photoshop...). I have tracked down this issue and I have a solution :

package.json 

{
"scripts": {
    "postinstall": "npm-run-all cleanDepWebfonts cleanDepIconFont",
    "cleanDepWebfonts": "rm -rf node_modules/webfonts-generator/node_modules/svgicons2svgfont",
    "cleanDepIconFont": "rm -rf node_modules/icon-font-generator/node_modules"
  },
  "devDependencies": {
    "icon-font-generator": "=2.1.9",
    "npm-run-all": "=4.1.5",
    "svgicons2svgfont": "manland/svgicons2svgfont#9f3e2ac",
    "webfonts-generator": "sunflowerdeath/webfonts-generator#ed306cd"
  }
}

Explanations :

svgicons2svgfont generate ligature with html unicode (for add it become &#x61;&#x64;&#x64;) which is perfect for web, but not for desktop font and tools :'(

So in manland/svgicons2svgfont#9f3e2ac I have made a little patch. And all is ok. I have open an issue in svgicons2svgfont but make no sense to fix it in their way. And if they do it, webfonts-generator has very old version , so we can't have it :man_shrugging:

dennisp93 commented 3 years ago

Hi, is it possible to fix this inside this package? Compared to Google's Material Icons the Ligature Feature ist now really common and it would be nice to have it inside the generated fonts. I would not prefer to fork my own version just to set the commit for the webfonts-generator.

Thanks :)