tancredi / fantasticon Goto Github PK
View Code? Open in Web Editor NEWIcon font generation tool
License: MIT License
Icon font generation tool
License: MIT License
The output file names seem fixed to icons.css, icons.eot, icons.woff, ...
Also the icons prefix is fixed to icon.
Please consider having a command line switch to configure the filename and CSS prefix.
thx
I am transforming many SVG's but some of them are not rendering properly.
[Uploading 118513818...]
It would be great if one could generate multiple files of the same file type.
Such as one HTML template for font demo purposes and one HTML template for server-side rendering inclusion.
Also one could be able to generate separate SCSS files for a) mixins b) font-face definition and c) icon selectors. This way, one could re-use the mixin imports without duplicated plain css of all icon selectors in case of code chunking, etc.
Regarding to the ticket #146 I think it is still a good idea to propose multiple tag.
If it's validated, I can do a PR.
// From
i[class^="icon-"]:before, i[class*=" icon-"]:before {
// To
i[class^="icon-"]:before, i[class*=" icon-"]:before, span[class^="icon-"]:before, span[class*=" icon-"]:before {
I'm trying to do Fork Awesome with Fantasticon instead of Ruby-based FontCustom. And one trouble I keep running into is adjusting this. Like for some icons, I expect this:
But instead, I get this:
I don't know if I'm adjusting it correctly or what, but in my case, it seems like the fontcustom.yml
file has configuration options for autowidth
and font ascent. Is it possible to add these capabilities or is it already an option and I don't even know.
We've been using this library heavily and it saves us a lot of development time, but at the same time it costs a lot of time for designers.
We use Figma for everything, but this library only works for svg files exported from Illustrator, if we export from anywhere else it doesn't work.
Any ideas what we are doing wrong? Is it supposed to only work with illustrator svgs?
This is how the html preview looks like when exported straight from Figma:
And this is is how it looks like when exported from Illustrator:
These are some of the svg that does not work
from figma not working.zip
These are some of the svg that works:
from-illustrator-working.zip
I'm using a lib which includes my icons by a prop name (Vue.js + Primevue).
The problem is this lib uses span for the icons element.
It might be good if I can define an array of possible elements instead of a tag in string.
I tried with selector but didn't work because of ' escape.
Trying to follow the instructions in this repo for setting up a codepoints.json file. The README says there are two options:
pathOptions: {
json: './misc/icon-codepoints.json'
},
codepoints: {
'chevron-left': 57344, // decimal representation of 0xe000
'chevron-right': 57345,
'thumbs-up': 57358,
'thumbs-down': 57359
},
When i reference codepoints directly (2nd option) the unicodes are correctly applied. But when used with the pathOptions (1st option) I am seeing the entire file ignore. What is the best way to reference and use a codepoints file?
Also, the README + cli helper would greatly benefit with more information as there's information in multiple areas and you have to hunt for the info by searching the repo + issues.
It would be great if the file hash, that is used for fontSrc
within css templates, would be accessible by all template types.
Use case:
Generate a HTML file with preload for the font, to be included within server-side rendering.
I'm sorry but I'm not able to create a coidepoint file. Can you provide me a sample of configuration file and the right way to write the command line?
till now documentation is quite poor
thanks
It would be nice if the generated TypeScript file included a comment at the top marking the file as a generated file, that way humans don't attempt to edit the file directly.
Something like:
// This file was automatically @generated by fantasticon
Note the @generated
: this is a de facto standard in generated files that indicates to tooling that the file is generated. An example from Rust's package manager, which marks its lock files as @generated
: rust-lang/cargo#6180
Is it possible do not to use the method "join" from the path for generating font path in CSS template?
I have different directories for fonts and styles and I need to combine them. I use fontsUrl parameter in the config, but in the windows environment, the method "join" changes slash in the path...
Expect:
I would like to use a forward slash in the font path.
Hi,
When I define pathOptions in the config file, and previously I don't create the directories it fail:
ENOENT: no such file or directory, open '.........\dist\icons-regular\icons.ttf'
There are some parameters that I need to define to allow the creation of directories? Or I always need to create the directories before run fantasticon?
Thank you all
NS
Hey @tancredi could you please tell me how to use the codepoints in a config file?
if you could show me a simple example i'd create a PR for the "official" documentation in your readme.
Best regards
-t
is used for --tag
and for --font-types
If you have something like guide shapes or "source" elements in your SVG file that are hidden, they still appear in the font.
E.g. a hidden layer created in Inkscape will create Elements like this:
<g
inkscape:label="Guides"
inkscape:groupmode="layer"
id="layer1"
sodipodi:insensitive="true"
style="display:none">
....
</g>
So I suppose elements with display
= none
should be filtered out.
I'm trying to generate octicons icon fonts using fantasticon.
When I ran it, the resulting font was filled in a strange state.
I tried changing the height and using svgo by referring to the following issues, but it did not solve.
Is there any solution?
With a configuration like this:
{
"inputDir": "./fontIcons",
"outputDir": "./static/fonts",
"fontTypes": [
"woff2"
],
"fontsUrl": "/fonts",
"assetTypes": [
"ts",
"css",
"html"
],
"formatOptions": {
"ts": {
"types": [
"literalId"
]
}
},
"pathOptions": {
"ts": "./src/types/icons.d.ts",
"html": "./static/icons.html"
},
"normalize": true
}
...the generated HTML file still attempts to import the CSS like this:
<link rel="stylesheet" type="text/css" href="icons.css" />
However, because the CSS file is actually at ./static/fonts/icons.css
, the import does not work.
It would be nice if we are able to specify where the HTML file should look for the CSS (in my case, I want it to actually link from /fonts/icons.css
).
I want to restructure my folder
And still get the same CSS
generated, currently .svg
is not generated as .icons-check
)
.icons-check:before {
content: "\f105";
}
.icons-check-circle:before {
content: "\f106";
}
I think this feature would be neat (Instead of .svg
we could have used _.svg
or something)
Is it possible to use handlebar helpers and if so: how?
I've got a config file like:
const package = require('./package.json');
const codepoints = require('./src/template/mapping.json');
module.exports = {
name: 'codicon',
prefix: 'codicon',
codepoints: codepoints,
inputDir: './src/icons',
outputDir: './dist',
fontTypes: ['ttf'],
normalize: true,
assetTypes: ['css', 'html'],
templates: {
html: './src/template/preview.hbs',
css: './src/template/styles.hbs'
},
formatOptions: {
ttf: {
url: package.url,
description: package.description,
version: package.version
}
}
};
And in the formatOptions, it looks like options
can be passed for ttf
using the svg2ttf api. It appears that all fields (url, description, copyright) work except for the version:
vg2ttf: invalid option, version - "0.0.17"
If I try to do just version: 1
then I get:
svg2ttf: version option should be a string
So I'm really confused as to why version is not taking my string
Hi @tancredi, with the older version (1.1.1) I was able to use icons in pseudo classes
.some-span::before {
font-family: given-name !important;
content: 'icon-name';
}
But with the new version this does not work, any idea on that? Thanks in advance!
Comparing with Fontawesome https://fontawesome.com/icons?d=gallery all symbols are vertically centered. This is necessary when a symbol is not using the whole height while others do. In the case of fantasticon all symbols are bottom aligned, this makes it impossible to align the symbol with others next-to-next vertically centered.
The -n (normalize) unfort. is not a solution since it also scales line width of symbol.
Would be great to have an option to vertically center the symbols inside the font.
thx
I used the next command fantasticon my-icons/*.svg -o icon-dist
and I had the next error
Invalid option inputDir: my-icons/accessibility-outline.svg is not a directory
OS: Arch Linux
nodejs: 15.11.0
npm: 7.6.3
Audit suggests updating/changing dependencies marked
and xmldom
:
$ /usr/bin/npm audit fix
changed 1 package, and audited 1281 packages in 8s
# npm audit report
marked 1.1.1 - 1.2.9
Severity: moderate
Regular Expression Denial of Service - https://npmjs.com/advisories/1623
fix available via `npm audit fix`
node_modules/marked
xmldom <0.5.0
Misinterpretation of malicious XML input - https://npmjs.com/advisories/1650
No fix available
node_modules/xmldom
svg2ttf *
Depends on vulnerable versions of xmldom
node_modules/svg2ttf
3 vulnerabilities (2 low, 1 moderate)
To address issues that do not require attention, run:
npm audit fix
Some issues need review, and may require choosing
a different dependency.
I'm not sure there's much there can be done to mitigate the above issues, just wanted to share this information.
Regards
Whatever I do I cannot get the font icon vertically centered:
I've already tried using the --descent option but with no effect. SVG files look correct. Also changing the CSS properties has no effect, so I am starting to believe that it is really inside the generated font.
Can I do something about it?
thx
In generateFonts the function is used.
I would much rather solve its purpose with default parameters in generateFonts.
I think this would be a step to make the whole config thing quite a bit simpler, and easyer to understand, and on the other hand also much less hassle when it is extended.
In my humble oppinion that function is waaaay to complicated for what it actually does:
{ json: { indent: 4 }}
What do you thin @tancredi ?
For our use-case it would be really cool, if we could change the output format of the generated json file.
I saw that there are already template options available for css, html, sass and scss, but not for json.
Is that because of the hbs template parsing?
(Great work on the library btw 🙂 )
So I am trying to generate a font from these two svg icons : 1,2 (look top left for the icon in the links).
Using fantasticon, the generated font does not have the original color. I took a look at the README.md file and could not find something of help.
I have tried generating the font using icomoon and the color is preserved via css property color.
How can I do that with fantasticon?
Current API doesn't allow much control over how the class names are build. Some kind of name transformer function passed in the config to give users control over this would be helpful; with a reasonable default to replace special characters from the file names.
The project seems to have decent tests, but they don't appear to be verifying Pull requests.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path style="opacity:1;fill:currentColor;fill-opacity:1;stroke:none;stroke-width:.250185;stop-color:#000" d="m16 4.742 13 22.516H3z" transform="rotate(90 16 16)"/></svg>
From the SVG font:
<glyph glyph-name="triangle-right"
unicode=""
horiz-adv-x="300" d="M255.54375 150L44.45625 28.125L28.125 271.875z" />
Maybe the transform (rotation) was not applied correctly for some reason, though i have triangles for other directions and they all seem fine.
e.g. the left variant:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path style="opacity:1;fill:currentColor;fill-opacity:1;stroke:none;stroke-width:.250185;stop-color:#000" d="M-16-27.258-3-4.742h-26z" transform="rotate(-90 16 -16)"/></svg>
I wish I could define codepoints for each glyph. Is it possible to do this through the codepoints
parameter?
We're using Fantasticon in Bootstrap Icons and it's been awesome, thanks so much for maintaining it!
One issue I've run into is that font files will always regenerate with changes to them in our repo, even when there are no new SVGs or changes to existing SVGs. This feels like it could be a bug in some way, or maybe there's a way to prevent this from happening that we haven't found in the project.
X-ref: twbs/icons#618
/cc @XhmikosR
Hi!
I found that when fontUrl
is directly set as an URL (in my case S3 bucket) then CSS font has one slash truncated due to how path.join() works.
For example:
https://my-statics.example.com/icons
is rendered in CSS file as https:/my-statics.example.com/icons
.
Relevant line:
Line 34 in 4e706c1
I know that it was probably designed to work with directory path's (like /static/icons
) but i think it is considerable to make it work with valid URL addresses.
It seems like the settings from pathOptions are not correctly applied to the generated SCSS file.
Sample configuration:
module.exports = {
name: 'FontName',
inputDir: './src',
outputDir: './dist',
fontTypes: ['ttf', 'woff', 'woff2', 'eot'],
assetTypes: ['ts', 'css', 'json', 'html', 'scss'],
pathOptions: {
ttf: './dist/font-path.ttf',
// ...
}
};
This is how the SCSS looks like:
$FontName-font: "FontName";
@font-face {
font-family: $FontName-font;
src: url("./FontName.ttf?844d80a3a20d138df75d79cb28752afd") format("truetype"),
However, it should be src: url("./font-path.ttf?844d80a3a20d138df75d79cb28752afd")
as specified in .fantasticonrc.js
.
Edit: Same thing happens for the CSS file, possibly in other places as well.
Running fantasticon 1.1.1 on Windows and processing the attached SVG.
executed line : fantasticon src -o dist -n sgdf
I'm getting a sax.js parsing error :
events.js:292
throw er; // Unhandled 'error' event
^
Error: Invalid character entity
Line: 12
Column: 53
Char: ;
at error (C:\Users\Sébastien\AppData\Roaming\npm\node_modules\fantasticon\node_modules\sax\lib\sax.js:651:10)
at strictFail (C:\Users\Sébastien\AppData\Roaming\npm\node_modules\fantasticon\node_modules\sax\lib\sax.js:677:7)
at parseEntity (C:\Users\Sébastien\AppData\Roaming\npm\node_modules\fantasticon\node_modules\sax\lib\sax.js:937:7)
at SAXParser.write (C:\Users\Sébastien\AppData\Roaming\npm\node_modules\fantasticon\node_modules\sax\lib\sax.js:1485:31)
at SAXStream.write (C:\Users\Sébastien\AppData\Roaming\npm\node_modules\fantasticon\node_modules\sax\lib\sax.js:239:18)
at ReadStream.ondata (internal/streams/readable.js:719:22)
at ReadStream.emit (events.js:315:20)
at addChunk (internal/streams/readable.js:309:12)
at readableAddChunk (internal/streams/readable.js:284:9)
at ReadStream.Readable.push (internal/streams/readable.js:223:10)
Emitted 'error' event on SVGIcons2SVGFontStream instance at:
at SAXStream.<anonymous> (C:\Users\Sébastien\AppData\Roaming\npm\node_modules\fantasticon\node_modules\svgicons2svgfont\src\index.js:348:12)
at SAXStream.emit (events.js:327:22)
at SAXParser.SAXStream._parser.onerror (C:\Users\Sébastien\AppData\Roaming\npm\node_modules\fantasticon\node_modules\sax\lib\sax.js:194:10)
at emit (C:\Users\Sébastien\AppData\Roaming\npm\node_modules\fantasticon\node_modules\sax\lib\sax.js:624:35)
at error (C:\Users\Sébastien\AppData\Roaming\npm\node_modules\fantasticon\node_modules\sax\lib\sax.js:653:5)
at strictFail (C:\Users\Sébastien\AppData\Roaming\npm\node_modules\fantasticon\node_modules\sax\lib\sax.js:677:7)
[... lines matching original stack trace ...]
at ReadStream.ondata (internal/streams/readable.js:719:22)
If the file name has "_" in the name, the generated icons in the asset files are striping it out.
fantasticonrc.js
module.exports = {
inputDir: "<>",
outputDir: "<>",
fontTypes: ["woff2"],
assetTypes: ["css", "json", "html"],
fontsUrl: "./",
prefix: "<>",
name: "<>,
normalize: true,
};
icon file name: icon_flag.svg
json file generated:
{
iconflag: 61697
}
css:
iconflag:before {
content: "\f101";
}
First off thanks for providing such a great library! 😸 It works great and does the job pretty solid.
One thing which would be great is to enable an option to provide custom HBS templates (at least for the CSS part).
There's a simple use case for SASS users, if we want to create additional SCSS variables for the icons for eg. using it in a custom ::after
selector we need to copy the content: ''
attribute manually but a variable (eg. $icon-<dashed-name>
) would be way easier to use.
Eventually providing more details about the icons in the callback results
would also provide a great option to add more custom scripts without too much regex action.
Let me know what you think about these ideas :)
Hello,
The SVG Font-Type generates a duplication of one icon:
The first is the normal (expected) icon, the second has the glyph-name as unicode name.
The old package icon-font-generator was not doing something like this.
I think the position of this behavior is here:
Problem
The svg file gets very big: 2-3x bigger then normal.
Is that wanted? When yes, is there a solution provided where i can deactivate this behavior?
Thanks
Dobbi
Hey. Great job rewriting this. Already fixed some issues I've been having trouble with.
I am using a .fantasticonrc.js file to pass the config. Looks like there is an issue with the fontsUrl
property. It seems to be ignored completely and does not change the resulted URL from the .css file. Looking at the renderSrcAttribute
function it looks like it should do the job.
Was doing a little housekeeping today and noticed that "icon-font-generator" is now deprecated. In my company, we are using NPM scripts to work on our client websites before they go into full development and found that new "fantasticon" is missing some features that used to be in "icons-font-generation".
here is the example config
{
"name": "reducted",
"version": "2.0.0",
"author": "Rihards Simanovics",
"scripts": {
"icons_old": "icon-font-generator images/icons/*.svg --html false -o fonts --cssfontsurl \"../fonts/\" --csspath styles/scss/autogen/_icons.scss --name IconsFont --tag \" \" --normalize true --height 9999 --mono true",
"icons": "fantasticon images/icons/ --output fonts --asset-types scss --font-height 9999 --normalize true"
},
"dependencies": {
"icon-font-generator": ">=2.1.10",
"fantasticon": ">=1.0.27"
}
}
As you can see, we are using quite a few options to generate our icon-font. Can you let me know if any of the options that are not in "icons"
script are available or whether they are coming in soon?
Icon creation + SVG export tool: figma
OS: OS X BigSur
Browsers: Safari, Firefox, Chrome
fantasticon version: 1.1.1
Problem
no matter how I create Icons, some circles get filled unexpectedly
Icon Creation in 4 different ways
As described in Workshape/icon-font-generator#12 (comment)
The generated interface does not comply with the eslint rules we're using in our project (in our case, using double quotes instead of single quotes). For now running eslint with the --fix argument does the trick, but it would be nice to have the possibility of customising the way the interface is generated.
Would you consider adding the ability to generate font URLs for Sass/Scss that include a $font-path
variable? This would help with our Bootstrap Icons project where we want folks to be able to import our project as a dependency and configure to their setup. As far as I can tell this feature isn't available yet.
$bi-font-path: "./fonts" !default;
@font-face {
font-family: "bootstrap-icons";
src: url("#{$bi-font-path}/bootstrap-icons.woff2?8bd4575acf83c7696dc7a14a966660a3") format("woff2"),
url("#{$bi-font-path}/bootstrap-icons.woff?8bd4575acf83c7696dc7a14a966660a3") format("woff");
}
X-ref: twbs/icons#563
/cc @XhmikosR
I tried on Ubuntu 18 LTS but failed at installation:
tombert@DESKTOP-APKU8T8:~/cm$ sudo npm install -g fantasticon
[sudo] password for tombert:
npm WARN deprecated [email protected]: Package no longer supported. Contact [email protected] for more info.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: this library is no longer supported
/usr/local/bin/fantasticon -> /usr/local/lib/node_modules/fantasticon/bin/fantasticon
> [email protected] install /usr/local/lib/node_modules/fantasticon/node_modules/ttf2woff2
> ((node-gyp configure && node-gyp build) > builderror.log) || (exit 0)
gyp WARN EACCES user "root" does not have permission to access the dev dir "/home/tombert/.node-gyp/8.10.0"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/local/lib/node_modules/fantasticon/node_modules/ttf2woff2/.node-gyp"
make: *** No rule to make target '../.node-gyp/8.10.0/include/node/common.gypi', needed by 'Makefile'. Stop.
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/fantasticon/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack at emitTwo (events.js:126:13)
On Rasp OS it installs but then I get a runtime error:
[20:51:49] openhabian@openHABianDevice:/etc/openhab2/webshare$ fantasticon -n -r svg/*
internal/modules/cjs/loader.js:834
throw err;
^
Error: Cannot find module '../lib/cli'
Require stack:
- /etc/openhab2/webshare/fantasticon/bin/fantasticon
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
at Function.Module._load (internal/modules/cjs/loader.js:687:27)
at Module.require (internal/modules/cjs/loader.js:903:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/etc/openhab2/webshare/fantasticon/bin/fantasticon:2:1)
at Module._compile (internal/modules/cjs/loader.js:1015:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
at Module.load (internal/modules/cjs/loader.js:879:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12) {
code: 'MODULE_NOT_FOUND',
thx!
Have changed the --selector to foo, still the icons.html is generated with "icons" prefix:
<span class="inner">
<i class="**icon** icon-cistern-full"></i>
</span>
<br>
<span class='label'>cistern-full</span>
</div>
... and the icons.html does not work anymore.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.