Open
Description
Plan - make an overhaul of the project (repo):
- fetch and periodically auto-update all icons from several sources, including:
- icons modified / added by myself or contributors of this repo
- VectorLogoZone
- gilbarbara/logos
- simple-icons
- make a Next.js based website, there will be an index page, each icon will have its own webpage as well
- GUI tool on the website, to generate icon list HTML code
- release a npm package ([Question] Any idea when this is released on NPM? #1)
- CLI tool (w/ config) to generate icon list HTML code and insert into README.md or other files
- the above website & npm package will be written in TypeScript
- Icon spec:
- SOURCE (/icons/):
- FORMAT:
- SVG only
- optional, prefered nominal size (the larger one of width & height) = 256(px)
- no whitespace (i.e. canvas should fit the content), unless, in very rare cases, the image has whitespace per se
- with
viewBox
withoutwidth
orheight
- no xml declaration (because it's not needed)
- the source SVGs had whitespace removed with Inkscape (script) and were optimized with SVGO (settings), but not minified (i.e. remove newlines and indentations)
- text must be converted to outline, non-outline text with unknown font is not acceptable
- VERSION:
- primary is square shape icon
- possibly with secondary versions which are rectancle shape logos or other icons
- night mode icon set also possible (GitHub icon in night mode #2)
- FORMAT:
- OUTPUT (/dist/?):
- FORMAT:
- SVG (minified)
- Original size (
viewBox
w/owidth
/height
) (optimization only) (/dist/svg/) - square, nominally 256 x 256 px (
viewBox
w/owidth
/height
) (/dist/svg_sqr/) - (maybe) square, nominally 22 x 22 px (
viewBox
ANDwidth
,height
) just for a GitHub mobile app bug (icon becomes very big and HTML img width does not work) (/dist/svg22/)
- Original size (
- PNG
- 256 x 256 px (/dist/png/)
- SVG (minified)
- FORMAT:
- SOURCE (/icons/):
- for the aliases, treat names with spaces and without spaces as the same, case-insensitive
- test. logo.json file should be validated
See /data/types/icons.ts for icons.json data type. Example:
{
"name": "JavaScript",
"aliases": [
"js"
],
"tags": [
"javascript",
"programming language"
],
"url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
"files": [
{
"filename": "javascript.svg",
"type": "icon",
"desc": "JavaScript Icon",
"tags": [
"yellow",
],
"source": "https://github.com/gilbarbara/logos/raw/master/logos/javascript.svg"
},
{
"filename": "javascript2.svg",
"type": "logo",
"desc": "JavaScript Text Logo",
"tags": [
"yellow",
"text"
],
"source": "../javascript2.svg"
}
]
},