Skip to content

Reorganization of the project #6

Open
@tomchen

Description

@tomchen

Plan - make an overhaul of the project (repo):

  • fetch and periodically auto-update all icons from several sources, including:
    1. icons modified / added by myself or contributors of this repo
    2. VectorLogoZone
    3. gilbarbara/logos
    4. 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 without width or height
        • 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)
    • OUTPUT (/dist/?):
      • FORMAT:
        • SVG (minified)
          • Original size (viewBox w/o width/height) (optimization only) (/dist/svg/)
          • square, nominally 256 x 256 px (viewBox w/o width/height) (/dist/svg_sqr/)
          • (maybe) square, nominally 22 x 22 px (viewBox AND width, height) just for a GitHub mobile app bug (icon becomes very big and HTML img width does not work) (/dist/svg22/)
        • PNG
          • 256 x 256 px (/dist/png/)
  • 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"
      }
    ]
  },

Metadata

Metadata

Assignees

No one assigned

    Labels

    add iconRequest to add icon(s)documentationImprovements or additions to documentationenhancementNew feature or requesthigh priorityHigh priority

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions