Simplify font and asset generation method

This commit is contained in:
Stephen Hutchings 2021-03-20 16:47:05 +11:00
parent 9c6cdc62a0
commit 6e7ddaabb4
27 changed files with 5595 additions and 4703 deletions

52
.fantasticonrc.js Normal file
View File

@ -0,0 +1,52 @@
const package = require("./package.json")
const codepoints = require("./scripts/codepoints")
const copyright = "(c) Stephen Hutchings 2012-2021"
module.exports = {
inputDir: "./src/svg",
outputDir: "./dist",
fontTypes: ["ttf", "woff", "woff2", "svg", "eot"],
assetTypes: ["ts", "css", "json", "html"],
fontsUrl: "",
name: "typicons",
prefix: "typcn",
tag: "span",
selector: ".typcn",
formatOptions: {
svg: {
fontId: "Typicons",
fontHeight: 1000,
ascent: 800,
descent: 200,
round: 1,
metadata: copyright,
},
json: {
indent: 2,
},
// woff: {
// metadata: {
// description: package.description,
// vendor: package.author.web,
// credits: package.author.name,
// copyright,
// },
// },
html: package,
ttf: {
copyright,
url: package.author.web,
description: package.description,
ts: undefined,
},
},
templates: {
css: "./src/demo/css.hbs",
html: "./src/demo/html.hbs",
},
pathOptions: {
html: "./dist/demo.html",
},
codepoints,
}

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
.DS_Store
node_modules

3
.gitmodules vendored
View File

@ -1,3 +0,0 @@
[submodule "support/font-builder"]
path = support/font-builder
url = git://github.com/fontello/font-builder.git

70
CHANGELOG.md Normal file
View File

@ -0,0 +1,70 @@
#### Version 2.1.0
- Icons no longer have zero sidebearings. Each icon is now equal width.
- Minified CSS is no longer generated.
- Updated build process to use `webfonts-generator` to generate all files.
- A JSON dictionary of codepoints is generated for all icons.
- Stylesheets no longer add unnecessary width and height declarations.
- Fix single-quotes @charset declaration in generated CSS file.
- Utility classes have been added for quickly resizing icons, similar to FontAwesome. (-lg, -2x, -3x, etc)
- Added woff2 to generated fonts.
#### Version 2.0.9
- Add source SVG files to `package.json`.
#### Version 2.0.8
- Fix `package.json` files entry for NPM.
#### Version 2.0.7
- Removed SVG ignores from Bower package for developer use.
#### Version 2.0.6
- This release fixes misspelled icons calendar and calendar-outline (Issue #9), renames incorrectly labelled cross to cloud-storage-outline (Issue #5) and adds search terms for many icons to make it easier to find the icon your looking for. It also adds higher decimal rounding for the social-youtube-circular icon to correct some node degradation in the SVG file.
#### Version 2.0.5
- Added non-minified CSS to Bower.
#### Version 2.0.4
- Font files are now licenced using the [SIL Open Font Licence](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web). This means that the font can be used, studied, modified and
redistributed freely as long as they are not sold by themselves.
#### Version 2.0.3
- Added new icons including:
- Sort down, sort up and unsorted
- Filter
- Social: Instagram, YouTube and Google Plus
- Vendors: Apple, Microsoft and Google
- Dropbox
- Half and full hearts
- Half and full stars
- Reverse play
- Thumbs OK
- CSS3 and HTML5
- Folder open
- Mortar board
- Spiral
#### Version 2.0.2
- Fixed support for IE 8 by replacing double colon with single in `::before`
#### Version 2.0.1
- Added bower support
- Removed EPS for smaller repo size (contact me if you want to get them)
#### Version 2.0.0
- Added 220 new icons, including outline variants
- Improved quality of vector artwork
- Mapped in the Private Use Area of Unicode to avoid being read by screen readers
- Rehinted with `ttfautohint`
- Grouped glyphs on demo page, for convenience
- Changed css glyphs names, to be more semantic

View File

@ -1,55 +0,0 @@
Development docs
================
Set of scripts to easily build webfonts from SVG images.
For a detailed description of how Typicons were made, see [here](http://www.typicons.com/more/making-typicons/).
Installation
------------
### Ubuntu
**(!)** Use Ubuntu **12.04**. Or you will have to manually install fresh freetype library, to build ttfautohint.
Install dependencies (fontforge & python modules):
sudo make dev-deps
Build additional software (ttf2eot, ttfautohint):
make support
### Mac
See the font-builder README for additional steps to build for OSX.
### Windows
TBD. Anyone, please help.
Making font
-----------
### Steps
1. Place images into `/src/svg` folder.
2. Add image info to `config.yml` (see comments in it)
3. Edit css/html templates, if needed.
4. Run `make`
Generated data will be placed in `./font`
You can rebuild css/html only with `make html`
### SVG image requirements
Any image will be proportionnaly scaled, to fit height in ascent-descent
It's convenient to make height = 1000px. Default font baseline will be 20% from
the bottom.
In most cases it's ok to visually allign icons to middle line, not to baseline.
If you are not sure, how to start - make image with 10% top/bottom padding.
Then generate demo page and tune scale/offset.

View File

@ -1,91 +0,0 @@
PROJECT := $(notdir ${PWD})
FONT_NAME := typicons
################################################################################
## ! DO NOT EDIT BELOW THIS LINE, UNLESS YOU REALLY KNOW WHAT ARE YOU DOING ! ##
################################################################################
TMP_PATH := /tmp/${PROJECT}-$(shell date +%s)
REMOTE_NAME ?= origin
REMOTE_REPO ?= $(shell git config --get remote.${REMOTE_NAME}.url)
FONTBUILDER ?= ./support/font-builder/bin/
# Add local versions of ttf2eot and ttfautohint to the PATH
PATH := $(PATH):./support/font-builder/support/ttf2eot/ttf2eot
PATH := $(PATH):./support/font-builder/support/ttfautohint/ttfautohint
PATH := $(PATH):./support/font-builder/bin
dist: font html
dump:
rm -r ./src/svg/
mkdir ./src/svg/
font-dump.js --hcrop -c config.yml -f -i ./src/original/Typicons.svg -o ./src/svg/ -d diff.yml
font:
@if test ! -d support/font-builder/bin ; then \
echo "font-builder binaries not found. run:" >&2 ; \
echo " make support" >&2 ; \
exit 128 ; \
fi
@if test ! `which ttf2eot` ; then \
echo "ttf2eot not found. run:" >&2 ; \
echo " make support" >&2 ; \
exit 128 ; \
fi
@if test ! `which ttfautohint` ; then \
echo "ttfautohint not found. run:" >&2 ; \
echo " make support" >&2 ; \
exit 128 ; \
fi
$(FONTBUILDER)fontbuild.py -c ./config.yml -t ./src/font_template.sfd -i ./src/svg -o ./src/font/$(FONT_NAME).ttf
ttfautohint --latin-fallback --hinting-limit=200 --hinting-range-max=50 --symbol ./src/font/$(FONT_NAME).ttf ./src/font/$(FONT_NAME)-hinted.ttf
mv ./src/font/$(FONT_NAME)-hinted.ttf ./src/font/$(FONT_NAME).ttf
$(FONTBUILDER)fontconvert.py -i ./src/font/$(FONT_NAME).ttf -o ./src/font
ttf2eot < ./src/font/$(FONT_NAME).ttf >./src/font/$(FONT_NAME).eot
npm-deps:
@if test ! `which npm` ; then \
echo "Node.JS and NPM are required for html demo generation." >&2 ; \
echo "This is non-fatal error and you'll still be able to build font," >&2 ; \
echo "however, to build demo with >> make html << you need:" >&2 ; \
echo " - Install Node.JS and NPM" >&2 ; \
echo " - Run this task once again" >&2 ; \
else \
npm install -g jade js-yaml.bin ; \
fi
support:
git submodule init support/font-builder
git submodule update support/font-builder
which ttf2eot ttfautohint > /dev/null || (cd support/font-builder && $(MAKE))
which js-yaml jade > /dev/null || $(MAKE) npm-deps
html:
$(FONTBUILDER)tpl-render.js --locals config.yml --input ./src/demo/demo.jade --output ./src/font/demo.html
$(FONTBUILDER)tpl-render.js --locals config.yml --input ./src/demo/font.css.jade --output ./src/font/typicons.css
$(FONTBUILDER)tpl-minify.js --locals config.yml --input ./src/demo/font.css.jade --output ./src/font/typicons.min.css
gh-pages:
@if test -z ${REMOTE_REPO} ; then \
echo 'Remote repo URL not found' >&2 ; \
exit 128 ; \
fi
cp -r ./src/font ${TMP_PATH} && \
touch ${TMP_PATH}/.nojekyll
cd ${TMP_PATH} && \
git init && \
git add . && \
git commit -q -m 'refreshed gh-pages'
cd ${TMP_PATH} && \
git remote add remote ${REMOTE_REPO} && \
git push --force remote +master:gh-pages
rm -rf ${TMP_PATH}
.PHONY: font npm-deps support

View File

@ -1,88 +1,30 @@
Typicons
----
## Typicons
Visit the [website](http://typicons.com/) for information on how to use Typicons on your website, a decription of how the font was made and more resources. If you wish to contact me regarding Typicons you can hit me up on [Twitter](http://twitter.com/typicons/).
Visit the [website](http://s-ings.com/typicons) for information on how to use Typicons on your website
Using Typicons
----
## Using Typicons
Typicons can be easily installed with [bower](http://www.bower.io/)...
```bash
$ bower install typicons
```
...or NPM.
Typicons can be easily installed via [npm](http://www.npmjs.com)...
```bash
$ npm install typicons.font
```
Otherwise, the font and minified CSS can be found in [src/font/](https://github.com/stephenhutchings/typicons.font/tree/master/src/font).
...or [bower](http://www.bower.io/).
```bash
$ bower install typicons
```
Otherwise, the fonts and CSS can be found in [src/font/](https://github.com/stephenhutchings/typicons.font/tree/master/src/font).
SVG source files can be found in [src/svg/](https://github.com/stephenhutchings/typicons.font/tree/master/src/svg).
If you're looking to use Typicons on iOS, you can find support [here](https://github.com/javaboyjunior/typicon-ios) thanks to [@javaboyjunior](https://github.com/javaboyjunior).
## Info
Info
----
What's new in Typicons? See the [changelog](https://github.com/stephenhutchings/typicons.font/blob/master/CHANGELOG.md).
What's new in Typicons
#### Version 2.0.9
- Add source SVG files to `package.json`.
#### Version 2.0.8
- Fix `package.json` files entry for NPM.
#### Version 2.0.7
- Removed SVG ignores from Bower package for developer use.
#### Version 2.0.6
- This release fixes misspelled icons calendar and calendar-outline (Issue #9), renames incorrectly labelled cross to cloud-storage-outline (Issue #5) and adds search terms for many icons to make it easier to find the icon your looking for. It also adds higher decimal rounding for the social-youtube-circular icon to correct some node degradation in the SVG file.
#### Version 2.0.5
- Added non-minified CSS to Bower.
#### Version 2.0.4
- Font files are now licenced using the [SIL Open Font Licence](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web). This means that the font can be used, studied, modified and
redistributed freely as long as they are not sold by themselves.
#### Version 2.0.3
- Added new icons including:
- Sort down, sort up and unsorted
- Filter
- Social: Instagram, YouTube and Google Plus
- Vendors: Apple, Microsoft and Google
- Dropbox
- Half and full hearts
- Half and full stars
- Reverse play
- Thumbs OK
- CSS3 and HTML5
- Folder open
- Mortar board
- Spiral
#### Version 2.0.2
- Fixed support for IE 8 by replacing double colon with single in `::before`
#### Version 2.0.1
- Added bower support
- Removed EPS for smaller repo size (contact me if you want to get them)
#### Version 2.0.0
- Added 220 new icons, including outline variants
- Improved quality of vector artwork
- Mapped in the Private Use Area of Unicode to avoid being read by screen readers
- Rehinted with `ttfautohint`
- Grouped glyphs on demo page, for convenience
- Changed css glyphs names, to be more semantic
License
-------
## License
#### Icons/Artwork
@ -94,8 +36,7 @@ Distributed under
Distributed under
[SIL Open Font Licence](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web) licence.
Other
-------
## Other
#### Scripting

1702
config.yml

File diff suppressed because it is too large Load Diff

View File

@ -4,6 +4,8 @@
"version": "2.0.9",
"style": "src/font/typicons.css",
"main": "src/font/typicons.css",
"copyright": "(c) Stephen Hutchings 2012-2021",
"className": "typcn",
"keywords": [
"icon",
"fonts",
@ -17,21 +19,25 @@
},
"author": {
"name": "Stephen Hutchings",
"web": "http://www.s-ings.com"
"web": "https://www.s-ings.com"
},
"repository": {
"type": "git",
"url": "https://github.com/stephenhutchings/typicons.font"
},
"license": "(CC-BY-SA and SIL)",
"dependencies": {
},
"files": [
"src/font/typicons.css",
"src/font/typicons.svg",
"src/font/typicons.eot",
"src/font/typicons.ttf",
"src/font/typicons.woff",
"src/font/typicons.json",
"src/svg/"
]
],
"devDependencies": {
"webfonts-generator": "^0.4.0"
},
"scripts": {
"generate": "node ./scripts/generate.js"
}
}

338
scripts/codepoints.js Normal file
View File

@ -0,0 +1,338 @@
module.exports = {
"adjust-brightness": 57344,
"adjust-contrast": 57345,
"anchor-outline": 57346,
anchor: 57347,
archive: 57348,
"arrow-back-outline": 57349,
"arrow-back": 57350,
"arrow-down-outline": 57351,
"arrow-down-thick": 57352,
"arrow-down": 57353,
"arrow-forward-outline": 57354,
"arrow-forward": 57355,
"arrow-left-outline": 57356,
"arrow-left-thick": 57357,
"arrow-left": 57358,
"arrow-loop-outline": 57359,
"arrow-loop": 57360,
"arrow-maximise-outline": 57361,
"arrow-maximise": 57362,
"arrow-minimise-outline": 57363,
"arrow-minimise": 57364,
"arrow-move-outline": 57365,
"arrow-move": 57366,
"arrow-repeat-outline": 57367,
"arrow-repeat": 57368,
"arrow-right-outline": 57369,
"arrow-right-thick": 57370,
"arrow-right": 57371,
"arrow-shuffle": 57372,
"arrow-sorted-down": 57373,
"arrow-sorted-up": 57374,
"arrow-sync-outline": 57375,
"arrow-sync": 57376,
"arrow-unsorted": 57377,
"arrow-up-outline": 57378,
"arrow-up-thick": 57379,
"arrow-up": 57380,
at: 57381,
"attachment-outline": 57382,
attachment: 57383,
"backspace-outline": 57384,
backspace: 57385,
"battery-charge": 57386,
"battery-full": 57387,
"battery-high": 57388,
"battery-low": 57389,
"battery-mid": 57390,
beaker: 57391,
beer: 57392,
bell: 57393,
book: 57394,
bookmark: 57395,
briefcase: 57396,
brush: 57397,
"business-card": 57398,
calculator: 57399,
"calendar-outline": 57400,
calendar: 57401,
"camera-outline": 57402,
camera: 57403,
"cancel-outline": 57404,
cancel: 57405,
"chart-area-outline": 57406,
"chart-area": 57407,
"chart-bar-outline": 57408,
"chart-bar": 57409,
"chart-line-outline": 57410,
"chart-line": 57411,
"chart-pie-outline": 57412,
"chart-pie": 57413,
"chevron-left-outline": 57414,
"chevron-left": 57415,
"chevron-right-outline": 57416,
"chevron-right": 57417,
clipboard: 57418,
"cloud-storage": 57419,
"cloud-storage-outline": 57428,
"code-outline": 57420,
code: 57421,
coffee: 57422,
"cog-outline": 57423,
cog: 57424,
compass: 57425,
contacts: 57426,
"credit-card": 57427,
css3: 57429,
database: 57430,
"delete-outline": 57431,
delete: 57432,
"device-desktop": 57433,
"device-laptop": 57434,
"device-phone": 57435,
"device-tablet": 57436,
directions: 57437,
"divide-outline": 57438,
divide: 57439,
"document-add": 57440,
"document-delete": 57441,
"document-text": 57442,
document: 57443,
"download-outline": 57444,
download: 57445,
dropbox: 57446,
edit: 57447,
"eject-outline": 57448,
eject: 57449,
"equals-outline": 57450,
equals: 57451,
"export-outline": 57452,
export: 57453,
"eye-outline": 57454,
eye: 57455,
feather: 57456,
film: 57457,
filter: 57458,
"flag-outline": 57459,
flag: 57460,
"flash-outline": 57461,
flash: 57462,
"flow-children": 57463,
"flow-merge": 57464,
"flow-parallel": 57465,
"flow-switch": 57466,
"folder-add": 57467,
"folder-delete": 57468,
"folder-open": 57469,
folder: 57470,
gift: 57471,
"globe-outline": 57472,
globe: 57473,
"group-outline": 57474,
group: 57475,
headphones: 57476,
"heart-full-outline": 57477,
"heart-half-outline": 57478,
"heart-outline": 57479,
heart: 57480,
"home-outline": 57481,
home: 57482,
html5: 57483,
"image-outline": 57484,
image: 57485,
"infinity-outline": 57486,
infinity: 57487,
"info-large-outline": 57488,
"info-large": 57489,
"info-outline": 57490,
info: 57491,
"input-checked-outline": 57492,
"input-checked": 57493,
"key-outline": 57494,
key: 57495,
keyboard: 57496,
leaf: 57497,
lightbulb: 57498,
"link-outline": 57499,
link: 57500,
"location-arrow-outline": 57501,
"location-arrow": 57502,
"location-outline": 57503,
location: 57504,
"lock-closed-outline": 57505,
"lock-closed": 57506,
"lock-open-outline": 57507,
"lock-open": 57508,
mail: 57509,
map: 57510,
"media-eject-outline": 57511,
"media-eject": 57512,
"media-fast-forward-outline": 57513,
"media-fast-forward": 57514,
"media-pause-outline": 57515,
"media-pause": 57516,
"media-play-outline": 57517,
"media-play-reverse-outline": 57518,
"media-play-reverse": 57519,
"media-play": 57520,
"media-record-outline": 57521,
"media-record": 57522,
"media-rewind-outline": 57523,
"media-rewind": 57524,
"media-stop-outline": 57525,
"media-stop": 57526,
"message-typing": 57527,
message: 57528,
messages: 57529,
"microphone-outline": 57530,
microphone: 57531,
"minus-outline": 57532,
minus: 57533,
"mortar-board": 57534,
news: 57535,
"notes-outline": 57536,
notes: 57537,
pen: 57538,
pencil: 57539,
"phone-outline": 57540,
phone: 57541,
"pi-outline": 57542,
pi: 57543,
"pin-outline": 57544,
pin: 57545,
pipette: 57546,
"plane-outline": 57547,
plane: 57548,
plug: 57549,
"plus-outline": 57550,
plus: 57551,
"point-of-interest-outline": 57552,
"point-of-interest": 57553,
"power-outline": 57554,
power: 57555,
printer: 57556,
"puzzle-outline": 57557,
puzzle: 57558,
"radar-outline": 57559,
radar: 57560,
"refresh-outline": 57561,
refresh: 57562,
"rss-outline": 57563,
rss: 57564,
"scissors-outline": 57565,
scissors: 57566,
"shopping-bag": 57567,
"shopping-cart": 57568,
"social-at-circular": 57569,
"social-dribbble-circular": 57570,
"social-dribbble": 57571,
"social-facebook-circular": 57572,
"social-facebook": 57573,
"social-flickr-circular": 57574,
"social-flickr": 57575,
"social-github-circular": 57576,
"social-github": 57577,
"social-google-plus-circular": 57578,
"social-google-plus": 57579,
"social-instagram-circular": 57580,
"social-instagram": 57581,
"social-last-fm-circular": 57582,
"social-last-fm": 57583,
"social-linkedin-circular": 57584,
"social-linkedin": 57585,
"social-pinterest-circular": 57586,
"social-pinterest": 57587,
"social-skype-outline": 57588,
"social-skype": 57589,
"social-tumbler-circular": 57590,
"social-tumbler": 57591,
"social-twitter-circular": 57592,
"social-twitter": 57593,
"social-vimeo-circular": 57594,
"social-vimeo": 57595,
"social-youtube-circular": 57596,
"social-youtube": 57597,
"sort-alphabetically-outline": 57598,
"sort-alphabetically": 57599,
"sort-numerically-outline": 57600,
"sort-numerically": 57601,
"spanner-outline": 57602,
spanner: 57603,
spiral: 57604,
"star-full-outline": 57605,
"star-half-outline": 57606,
"star-half": 57607,
"star-outline": 57608,
star: 57609,
"starburst-outline": 57610,
starburst: 57611,
stopwatch: 57612,
support: 57613,
"tabs-outline": 57614,
tag: 57615,
tags: 57616,
"th-large-outline": 57617,
"th-large": 57618,
"th-list-outline": 57619,
"th-list": 57620,
"th-menu-outline": 57621,
"th-menu": 57622,
"th-small-outline": 57623,
"th-small": 57624,
thermometer: 57625,
"thumbs-down": 57626,
"thumbs-ok": 57627,
"thumbs-up": 57628,
"tick-outline": 57629,
tick: 57630,
ticket: 57631,
time: 57632,
"times-outline": 57633,
times: 57634,
trash: 57635,
tree: 57636,
"upload-outline": 57637,
upload: 57638,
"user-add-outline": 57639,
"user-add": 57640,
"user-delete-outline": 57641,
"user-delete": 57642,
"user-outline": 57643,
user: 57644,
"vendor-android": 57645,
"vendor-apple": 57646,
"vendor-microsoft": 57647,
"video-outline": 57648,
video: 57649,
"volume-down": 57650,
"volume-mute": 57651,
"volume-up": 57652,
volume: 57653,
"warning-outline": 57654,
warning: 57655,
watch: 57656,
"waves-outline": 57657,
waves: 57658,
"weather-cloudy": 57659,
"weather-downpour": 57660,
"weather-night": 57661,
"weather-partly-sunny": 57662,
"weather-shower": 57663,
"weather-snow": 57664,
"weather-stormy": 57665,
"weather-sunny": 57666,
"weather-windy-cloudy": 57667,
"weather-windy": 57668,
"wi-fi-outline": 57669,
"wi-fi": 57670,
wine: 57671,
"world-outline": 57672,
world: 57673,
"zoom-in-outline": 57674,
"zoom-in": 57675,
"zoom-out-outline": 57676,
"zoom-out": 57677,
"zoom-outline": 57678,
zoom: 57679,
}

58
scripts/generate.js Normal file
View File

@ -0,0 +1,58 @@
const fs = require("fs")
const path = require("path")
const webfontsGenerator = require("webfonts-generator")
const package = require("../package.json")
const codepoints = require("./codepoints")
const dest = "./src/font/"
const tmpl = "./scripts/templates"
const files = Object.keys(codepoints).map((key) => `./src/svg/${key}.svg`)
console.log("Generating font...")
console.log(`Found ${files.length} icon declarations`)
webfontsGenerator(
{
files,
dest,
codepoints,
classPrefix: package.className + "-",
baseSelector: "." + package.className,
types: ["woff2", "woff", "ttf", "svg", "eot"],
fontName: "typicons",
round: 10,
ascent: 800,
descent: 200,
fontHeight: 1000,
cssTemplate: path.join(tmpl, "/css.hbs"),
html: true,
htmlTemplate: path.join(tmpl, "/html.hbs"),
htmlDest: path.join(dest, "demo.html"),
templateOptions: package,
formatOptions: {
svg: {
metadata: package.copyright,
fontId: "Typicons",
},
ttf: {
copyright: package.copyright,
url: package.author.web,
description: package.description,
},
},
},
function (error) {
if (error) {
console.log("An error occurred generated the files.", error)
} else {
console.log("Files generated successfully.")
fs.writeFileSync(
path.join(dest, "typicons.json"),
JSON.stringify(codepoints, null, 2)
)
}
}
)

41
scripts/templates/css.hbs Normal file
View File

@ -0,0 +1,41 @@
@charset "UTF-8";
@font-face {
font-family: "{{ fontName }}";
src: {{{ src }}};
}
.{{className}}:before {
font-family: {{ fontName }} !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.{{className}}-lg {
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.{{className}}-2x {
font-size: 2em;
}
.{{className}}-3x {
font-size: 3em;
}
.{{className}}-4x {
font-size: 4em;
}
.{{className}}-5x {
font-size: 5em;
}
{{# each codepoints }}
.{{ ../className }}-{{ @key }}:before {
content: "\\{{ this }}";
}
{{/ each }}

115
scripts/templates/html.hbs Normal file
View File

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Typicons</title>
<style>
body {
margin: 0;
padding: 1em;
font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 18px;
color: #333;
background-color: #fff;
}
header {
position: fixed;
left: 1em;
right: 1em;
top: 0;
background: #fff;
z-index: 1;
}
header .container {
border-bottom: 1px solid #ddd;
}
header h1 {
font: inherit;
font-weight: bold;
margin-top: 1em;
}
header p {
color: #666;
max-width: 500px;
}
.container {
max-width: 784px;
margin: auto;
position: relative;
}
#icons {
font-size: 24px;
display: flex;
margin: 92px -8px 0;
flex-flow: row wrap;
}
.icon {
width: 200px;
max-width: 50%;
box-sizing: border-box;
display: flex;
padding: 8px;
}
.label {
display: inline-block;
width: 100%;
box-sizing: border-box;
padding: 4px 8px;
font-size: 12px;
font-family: Monaco, monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 1px;
color: #666;
}
@media (max-width: 512px) {
#icons {
margin-top: 112px;
}
}
{{{ styles }}}
</style>
</head>
<body>
<header>
<div class="container">
<h1>Typicons &middot; v{{ version }}</h1>
<p>{{ description }}</p>
</div>
</header>
<div class="container">
<div id="icons">
{{# each names }}
<div class="icon">
<span class="{{ ../className }} {{ ../className }}-{{ this }}"></span>
<span class='label'>{{ this }}</span>
</div>
{{/ each }}
</div>
</div>
<footer>
<div class="container">
<p>Created by
<a href="{{author.web}}">
{{author.name}}
</a>
</p>
</div>
</footer>
</body>
</html>

View File

@ -1,2 +0,0 @@
Font demo page templates. Generated code is a bit dirty, but it's done
intentionally, for easy maintenance & single file buldling

View File

@ -1,70 +0,0 @@
!!! 5
html
head
//if lt IE 9
script(src='http://html5shim.googlecode.com/svn/trunk/html5.js')
meta(charset='UTF-8')
:stylus
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #333333;
background-color: #ffffff;
}
.page-header
width 100%
position fixed
background white
z-index 10
top 0
small
font-size 0.6em
color #666
font-weight normal
.container
border-bottom 1px solid #ddd
padding 12px 0
.container,
#preview
width 940px
margin auto
position relative
#icons
margin-top 112px
font-size 24px
.icon
float left
padding 6px
include font.jade
body
.page-header
.container
h1 #{font.fullname}
small font demo
#icons
#preview.clearfix
- var col_class = "span" + Math.ceil(12 / meta.columns)
- var chunk_size = Math.ceil(glyphs.length / meta.columns)
- for (var i = 0; i < meta.columns; i++)
- var offset = i * chunk_size
- for (var c = 0; c < chunk_size && glyphs[offset + c]; c++)
- var g = glyphs[offset + c]
- var css_class = meta.css_prefix + '-' + (g.css || g.file)
- var code = g.code.toString(16)
- var match = g.search + ' ' + g.css.split('-').join(' ')
.icon(data-name='#{g.css}', data-code='#{code}', data-match='#{match} ')
span(class=meta.css_prefix + ' ' + css_class)

View File

@ -1,41 +0,0 @@
| @charset 'UTF-8';
|
/* @FONT-FACE loads font into browser */
| @font-face {
| font-family: '#{font.fontname}';
| font-weight: normal;
| font-style: normal;
| src: url('#{font.fontname}.eot');
| src: url('#{font.fontname}.eot?#iefix') format('embedded-opentype'),
| url('#{font.fontname}.woff') format('woff'),
| url('#{font.fontname}.ttf') format('truetype'),
| url('#{font.fontname}.svg##{font.fontname}') format('svg');
| }
|
/* :before psuedo-selector inserts and styles icon */
| .#{meta.css_prefix}:before {
| font-family: '#{font.fontname}';
| font-style: normal;
| font-weight: normal;
| speak: none;
| display: inline-block;
| text-decoration: inherit;
| width: 1em;
| height: 1em;
| font-size: 1em;
| text-align: center;
| -webkit-font-smoothing: antialiased;
| font-smoothing: antialiased;
| text-rendering: optimizeLegibility;
| }
|
/* Code for individual icons */
for g, i in glyphs
- var css = meta.css_prefix + '-' + g.css;
- var hex = g.code.replace('0x','\\');
- var chr = unichr(g.code);
|
| .#{css}:before {
| content: '#{hex}'; /* '#{chr}' */
| }

View File

@ -1,48 +0,0 @@
| <style type="text/css">
| @charset 'UTF-8';
/* @FONT-FACE loads font into browser */
| @font-face {
| font-family: '#{font.fontname}';
| src: url('#{font.fontname}.eot');
| src: url('#{font.fontname}.eot?#iefix') format('embedded-opentype'),
| url('#{font.fontname}.woff') format('woff'),
| url('#{font.fontname}.ttf') format('truetype'),
| url('#{font.fontname}.svg##{font.fontname}') format('svg');
| font-weight: normal;
| font-style: normal;
| }
/* :before psuedo-selector inserts and styles icon */
| .#{meta.css_prefix}:before {
| font-family: '#{font.fontname}';
| font-style: normal;
| font-weight: normal;
| speak: none;
| display: inline-block;
| text-decoration: inherit;
| width: 1em;
| height: 1em;
| font-size: 1em;
| text-align: center;
| -webkit-font-smoothing: antialiased;
| font-smoothing: antialiased;
| text-rendering: optimizeLegibility;
| }
| </style>
| <style type="text/css">
/* Code for individual icons */
- var i, g, css, hex, chr
- for (i in glyphs)
- g = glyphs[i]
- css = meta.css_prefix + '-' + g.css
- hex = g.code.replace('0x','\\')
- chr = unichr(g.code)
!= '\n'
| .#{css}:before { content: '#{hex}'; } /* '#{chr}' */
| </style>

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

Binary file not shown.

338
src/font/typicons.json Normal file
View File

@ -0,0 +1,338 @@
{
"adjust-brightness": 57344,
"adjust-contrast": 57345,
"anchor-outline": 57346,
"anchor": 57347,
"archive": 57348,
"arrow-back-outline": 57349,
"arrow-back": 57350,
"arrow-down-outline": 57351,
"arrow-down-thick": 57352,
"arrow-down": 57353,
"arrow-forward-outline": 57354,
"arrow-forward": 57355,
"arrow-left-outline": 57356,
"arrow-left-thick": 57357,
"arrow-left": 57358,
"arrow-loop-outline": 57359,
"arrow-loop": 57360,
"arrow-maximise-outline": 57361,
"arrow-maximise": 57362,
"arrow-minimise-outline": 57363,
"arrow-minimise": 57364,
"arrow-move-outline": 57365,
"arrow-move": 57366,
"arrow-repeat-outline": 57367,
"arrow-repeat": 57368,
"arrow-right-outline": 57369,
"arrow-right-thick": 57370,
"arrow-right": 57371,
"arrow-shuffle": 57372,
"arrow-sorted-down": 57373,
"arrow-sorted-up": 57374,
"arrow-sync-outline": 57375,
"arrow-sync": 57376,
"arrow-unsorted": 57377,
"arrow-up-outline": 57378,
"arrow-up-thick": 57379,
"arrow-up": 57380,
"at": 57381,
"attachment-outline": 57382,
"attachment": 57383,
"backspace-outline": 57384,
"backspace": 57385,
"battery-charge": 57386,
"battery-full": 57387,
"battery-high": 57388,
"battery-low": 57389,
"battery-mid": 57390,
"beaker": 57391,
"beer": 57392,
"bell": 57393,
"book": 57394,
"bookmark": 57395,
"briefcase": 57396,
"brush": 57397,
"business-card": 57398,
"calculator": 57399,
"calendar-outline": 57400,
"calendar": 57401,
"camera-outline": 57402,
"camera": 57403,
"cancel-outline": 57404,
"cancel": 57405,
"chart-area-outline": 57406,
"chart-area": 57407,
"chart-bar-outline": 57408,
"chart-bar": 57409,
"chart-line-outline": 57410,
"chart-line": 57411,
"chart-pie-outline": 57412,
"chart-pie": 57413,
"chevron-left-outline": 57414,
"chevron-left": 57415,
"chevron-right-outline": 57416,
"chevron-right": 57417,
"clipboard": 57418,
"cloud-storage": 57419,
"cloud-storage-outline": 57428,
"code-outline": 57420,
"code": 57421,
"coffee": 57422,
"cog-outline": 57423,
"cog": 57424,
"compass": 57425,
"contacts": 57426,
"credit-card": 57427,
"css3": 57429,
"database": 57430,
"delete-outline": 57431,
"delete": 57432,
"device-desktop": 57433,
"device-laptop": 57434,
"device-phone": 57435,
"device-tablet": 57436,
"directions": 57437,
"divide-outline": 57438,
"divide": 57439,
"document-add": 57440,
"document-delete": 57441,
"document-text": 57442,
"document": 57443,
"download-outline": 57444,
"download": 57445,
"dropbox": 57446,
"edit": 57447,
"eject-outline": 57448,
"eject": 57449,
"equals-outline": 57450,
"equals": 57451,
"export-outline": 57452,
"export": 57453,
"eye-outline": 57454,
"eye": 57455,
"feather": 57456,
"film": 57457,
"filter": 57458,
"flag-outline": 57459,
"flag": 57460,
"flash-outline": 57461,
"flash": 57462,
"flow-children": 57463,
"flow-merge": 57464,
"flow-parallel": 57465,
"flow-switch": 57466,
"folder-add": 57467,
"folder-delete": 57468,
"folder-open": 57469,
"folder": 57470,
"gift": 57471,
"globe-outline": 57472,
"globe": 57473,
"group-outline": 57474,
"group": 57475,
"headphones": 57476,
"heart-full-outline": 57477,
"heart-half-outline": 57478,
"heart-outline": 57479,
"heart": 57480,
"home-outline": 57481,
"home": 57482,
"html5": 57483,
"image-outline": 57484,
"image": 57485,
"infinity-outline": 57486,
"infinity": 57487,
"info-large-outline": 57488,
"info-large": 57489,
"info-outline": 57490,
"info": 57491,
"input-checked-outline": 57492,
"input-checked": 57493,
"key-outline": 57494,
"key": 57495,
"keyboard": 57496,
"leaf": 57497,
"lightbulb": 57498,
"link-outline": 57499,
"link": 57500,
"location-arrow-outline": 57501,
"location-arrow": 57502,
"location-outline": 57503,
"location": 57504,
"lock-closed-outline": 57505,
"lock-closed": 57506,
"lock-open-outline": 57507,
"lock-open": 57508,
"mail": 57509,
"map": 57510,
"media-eject-outline": 57511,
"media-eject": 57512,
"media-fast-forward-outline": 57513,
"media-fast-forward": 57514,
"media-pause-outline": 57515,
"media-pause": 57516,
"media-play-outline": 57517,
"media-play-reverse-outline": 57518,
"media-play-reverse": 57519,
"media-play": 57520,
"media-record-outline": 57521,
"media-record": 57522,
"media-rewind-outline": 57523,
"media-rewind": 57524,
"media-stop-outline": 57525,
"media-stop": 57526,
"message-typing": 57527,
"message": 57528,
"messages": 57529,
"microphone-outline": 57530,
"microphone": 57531,
"minus-outline": 57532,
"minus": 57533,
"mortar-board": 57534,
"news": 57535,
"notes-outline": 57536,
"notes": 57537,
"pen": 57538,
"pencil": 57539,
"phone-outline": 57540,
"phone": 57541,
"pi-outline": 57542,
"pi": 57543,
"pin-outline": 57544,
"pin": 57545,
"pipette": 57546,
"plane-outline": 57547,
"plane": 57548,
"plug": 57549,
"plus-outline": 57550,
"plus": 57551,
"point-of-interest-outline": 57552,
"point-of-interest": 57553,
"power-outline": 57554,
"power": 57555,
"printer": 57556,
"puzzle-outline": 57557,
"puzzle": 57558,
"radar-outline": 57559,
"radar": 57560,
"refresh-outline": 57561,
"refresh": 57562,
"rss-outline": 57563,
"rss": 57564,
"scissors-outline": 57565,
"scissors": 57566,
"shopping-bag": 57567,
"shopping-cart": 57568,
"social-at-circular": 57569,
"social-dribbble-circular": 57570,
"social-dribbble": 57571,
"social-facebook-circular": 57572,
"social-facebook": 57573,
"social-flickr-circular": 57574,
"social-flickr": 57575,
"social-github-circular": 57576,
"social-github": 57577,
"social-google-plus-circular": 57578,
"social-google-plus": 57579,
"social-instagram-circular": 57580,
"social-instagram": 57581,
"social-last-fm-circular": 57582,
"social-last-fm": 57583,
"social-linkedin-circular": 57584,
"social-linkedin": 57585,
"social-pinterest-circular": 57586,
"social-pinterest": 57587,
"social-skype-outline": 57588,
"social-skype": 57589,
"social-tumbler-circular": 57590,
"social-tumbler": 57591,
"social-twitter-circular": 57592,
"social-twitter": 57593,
"social-vimeo-circular": 57594,
"social-vimeo": 57595,
"social-youtube-circular": 57596,
"social-youtube": 57597,
"sort-alphabetically-outline": 57598,
"sort-alphabetically": 57599,
"sort-numerically-outline": 57600,
"sort-numerically": 57601,
"spanner-outline": 57602,
"spanner": 57603,
"spiral": 57604,
"star-full-outline": 57605,
"star-half-outline": 57606,
"star-half": 57607,
"star-outline": 57608,
"star": 57609,
"starburst-outline": 57610,
"starburst": 57611,
"stopwatch": 57612,
"support": 57613,
"tabs-outline": 57614,
"tag": 57615,
"tags": 57616,
"th-large-outline": 57617,
"th-large": 57618,
"th-list-outline": 57619,
"th-list": 57620,
"th-menu-outline": 57621,
"th-menu": 57622,
"th-small-outline": 57623,
"th-small": 57624,
"thermometer": 57625,
"thumbs-down": 57626,
"thumbs-ok": 57627,
"thumbs-up": 57628,
"tick-outline": 57629,
"tick": 57630,
"ticket": 57631,
"time": 57632,
"times-outline": 57633,
"times": 57634,
"trash": 57635,
"tree": 57636,
"upload-outline": 57637,
"upload": 57638,
"user-add-outline": 57639,
"user-add": 57640,
"user-delete-outline": 57641,
"user-delete": 57642,
"user-outline": 57643,
"user": 57644,
"vendor-android": 57645,
"vendor-apple": 57646,
"vendor-microsoft": 57647,
"video-outline": 57648,
"video": 57649,
"volume-down": 57650,
"volume-mute": 57651,
"volume-up": 57652,
"volume": 57653,
"warning-outline": 57654,
"warning": 57655,
"watch": 57656,
"waves-outline": 57657,
"waves": 57658,
"weather-cloudy": 57659,
"weather-downpour": 57660,
"weather-night": 57661,
"weather-partly-sunny": 57662,
"weather-shower": 57663,
"weather-snow": 57664,
"weather-stormy": 57665,
"weather-sunny": 57666,
"weather-windy-cloudy": 57667,
"weather-windy": 57668,
"wi-fi-outline": 57669,
"wi-fi": 57670,
"wine": 57671,
"world-outline": 57672,
"world": 57673,
"zoom-in-outline": 57674,
"zoom-in": 57675,
"zoom-out-outline": 57676,
"zoom-out": 57677,
"zoom-outline": 57678,
"zoom": 57679
}

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 182 KiB

After

Width:  |  Height:  |  Size: 287 KiB

Binary file not shown.

Binary file not shown.

BIN
src/font/typicons.woff2 Normal file

Binary file not shown.

View File

@ -1 +1 @@
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="8.5" cy="8.501" r="2.5"/><path d="M16 10c-2 0-3 3-4.5 3s-1.499-1-3.5-1c-2 0-3.001 4-3.001 4h14.001s-1-6-3-6zM20 3h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2v-12c0-1.103-.897-2-2-2zm0 14h-16v-12h16v12z"/></svg>
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="8.5" cy="8.5" r="2.5"/><path d="M16 10c-2 0-3 3-4.5 3s-1.499-1-3.5-1c-2 0-3.001 4-3.001 4h14.001s-1-6-3-6zM20 3h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2v-12c0-1.103-.897-2-2-2zm0 14h-16v-12h16v12z"/></svg>

Before

Width:  |  Height:  |  Size: 361 B

After

Width:  |  Height:  |  Size: 359 B