{"id":15645767,"url":"https://github.com/bubkoo/logo.svg","last_synced_at":"2025-04-30T11:15:09.880Z","repository":{"id":54680209,"uuid":"55063630","full_name":"bubkoo/logo.svg","owner":"bubkoo","description":"Generate a svg logo, then you can embed it in you README.","archived":false,"fork":false,"pushed_at":"2016-04-16T10:36:11.000Z","size":121,"stargazers_count":57,"open_issues_count":1,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-19T01:31:49.370Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/logo.svg","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bubkoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-30T13:05:08.000Z","updated_at":"2025-02-17T02:32:34.000Z","dependencies_parsed_at":"2022-08-13T23:50:29.983Z","dependency_job_id":null,"html_url":"https://github.com/bubkoo/logo.svg","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubkoo%2Flogo.svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubkoo%2Flogo.svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubkoo%2Flogo.svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubkoo%2Flogo.svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bubkoo","download_url":"https://codeload.github.com/bubkoo/logo.svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251687556,"owners_count":21627588,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T12:09:46.950Z","updated_at":"2025-04-30T11:15:09.837Z","avatar_url":"https://github.com/bubkoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![logo.svg](https://cdn.rawgit.com/bubkoo/logo.svg/d05cbb1/logo.svg)\n\n\u003e Generate a svg logo, then you can embed it in you README.md\n\n[![MIT License](https://img.shields.io/badge/license-MIT_License-green.svg?style=flat-square)](https://github.com/bubkoo/logo.svg/blob/master/LICENSE)\n\n[![npm:](https://img.shields.io/npm/v/logo.svg.svg?style=flat-square)](https://www.npmjs.com/packages/logo.svg)\n[![build:?](https://img.shields.io/travis/bubkoo/logo.svg/master.svg?style=flat-square)](https://travis-ci.org/bubkoo/logo.svg)\n\n\n**Feature:**\n\n- Custom font, font size, letter spacing\n- Generate individual path for every char\n- Support any valid attributes and style\n- Handily cli\n\n\n## Install\n\nTo use the `logo` command, install it globally:\n\n```\n$ npm install logo.svg -g\n```\n\nTo use the JavaScript API, install `logo.svg` locally:\n\n```\n$ npm install logo.svg --save\n```\n\nIf you need both the `logo` command and the JavaScript API, install `logo.svg`.js both ways.\n\n\n## Usage\n\n### CLI\n\n```\n$ logo [options]\n```\n\n**Options:**\n\n```\n  -l, --logo ??? ............. The logo text. Default is the `name` of the `package.json`.\n  -f, --font ??? ............. Specify the font path or url.\n  -s, --fontSize ??? ......... Specify the font size. Default `72`.\n  -o, --output ??? ........... Specify the output path. Default `logo.svg`\n  -c, --config ??? ........... Specify the `.logorc` file.\n  -O, --overwrite ............ Overwrite when a logo file exist. Default `true`.\n  -k, --kerning .............. Take kerning information into account. Default `true`.\n  -d, --divided .............. Generate individual path for every char. Default `false`.\n  -V, --version .............. Print the current version.\n  -h, --help ................. You're looking at it.\n  -h, --help ??? ............. Show details for the specified command.\n```\n\n**Examples:**\n\n```\n  $ logo\n  $ logo -Odo ./logo/logo.svg\n  $ logo --config ./logo/.logorc\n  $ logo --help\n  $ logo --help font\n  $ logo --help config\n  $ logo --version\n```\n\n### JavaScript API\n\n```js\nvar logo = require('logo.svg');\n// generate the svg string, then you can use it in you code\nvar svg = logo.generate(options);\n```\n\n## Options\n\n### font\n\nThe font's path or full url. If it's an url, we will load the font asynchronous then generate the logo.\n\nIf the path is relative, it is relative to the current work directory(`process.cwd()`). \n\nIf the path is a basename, such as `fontName.ttf`, we will fisrtly try to load it as a relative path, if that failed we will search it from the **preset** folder, and then search it from system and user fonts folders.\n\nThe preset folder is `./fonts/`, contribute your fonts by [pull request](https://github.com/bubkoo/logo.svg/pulls).\n\n### logo\n\nThe logo text. Default is the `name` in `package.json`.\n\n### x\n\nHorizontal position of the beginning of the text. (default: `0`)\n\n### y\n\nVertical position of the baseline of the text. (default: `0`)\n\n### fontSize\n\nSize of the text. (default: `72`)\n\n### spacing\n\nThe letter spacing. (default: `0`)\n\n### kerning\n\nIf `true` takes kerning information into account. (default: `true`)\n\n### divided\n\nIf `true` generates individual path for every char. (default: `false`)\n\n### grouped\n\nIf `true` groups the individual `\u003cpath\u003e` with `\u003cg\u003e\u003c/g\u003e` element. (default: `false`)\n\n### title\n\nIf specified will generate a `\u003ctitle\u003e` at the root of `\u003csvg\u003e`. (default: `logo`)\n\n### desc\n\nIf specified will generate a `\u003cdesc\u003e` at the root of `\u003csvg\u003e`. (default: `null`)\n\n\n## Styling the logo\n\nSpecify the padding of the `\u003cpath\u003e` relative to the `\u003csvg\u003e`:\n\n- options.padding\n- options.paddingTop or options['padding-top']\n- options.paddingRight or options['padding-right']\n- options.paddingBottom or options['padding-bottom']\n- options.paddingLeft or options['padding-left']\n\nThe `\u003csvg\u003e`, `\u003cpath\u003e` and `\u003cg\u003e` elements can be styled by any valid attributes. \n\nThe generated `\u003csvg\u003e` has the following default attributes:\n\n```js\n{\n\t'version'    : '1.1',\n    'xmlns'      : 'http://www.w3.org/2000/svg',\n    'xmlns:xlink': 'http://www.w3.org/1999/xlink',\n    'role'   : 'img',\n    'width'  : width,\n    'height' : height,\n    'viewbox': [x, y, width, height].join(' ')\n}\n```\n\nWe can **add**/**update**/**remove** by `options.svg`:\n\n```js\noptions.svg = {\n\t'version': '',     // remove this attribute\n    'role'   : 'logo', // update this attribute\n    'fill'   : 'red'   // add some custiom styles\n}\n```\n\n**Note** that the `width`, `height` and `viewbox` can't be specified.\n\nStyling the `\u003cpath\u003e` by `options.path`. If `divided` is `true` we can style the individual `\u003cpath\u003e` element by `options.path?`, which `?` is the index of each char in the `logo`:\n\n```js\n// style for every path(s)\noptions.path  = {\n    'fill': yellow\n};\n\n// style the first char\noptions.path0 = {\n    'fill': '#FF0000',\n    'stroke': '#000000'\n};\n```\n\nAs the same `options.g` specified the style of `\u003cg\u003e` element. \n\n\n## .logorc\n\nAll the options can be specified in the following files:\n\n- .logorc.js\n- .logorc.yaml\n- .logorc.yml\n- .logorc.json\n- .logorc\n- The `logo` section in `package.json`\n\nWe will try to load configuration from these files order by order, stop **until** any file load succeed.\n\nExample for `.logorc`:\n\n```yaml\nfont: Origami-Mommy-Pixellated.ttf\nfontSzie: 72\noutput: logo.svg\n# style the logo\npath:\n  fill: '#6ccb99'\n```\n\nExample for `package.json`:\n\n```json\n{\n  \"name\": \"module\",\n  \"version\": \"1.0.0\",\n \n  \"logo\": {\n    \"font\": \"Origami-Mommy-Pixellated.ttf\",\n    \"fontSzie\": 72,\n    \"output\": \"logo.svg\",\n    \"path\": {\n      \"fill\": \"#6ccb99\"\n    }\n  },\n  \n}\n```\n\n\n## Embed the logo\n\nSVG does not work from README by design for security concerns [...](http://stackoverflow.com/a/21521184/895245)\n\n\u003e We have had to disable svg image rendering on GitHub.com due to potential cross site scripting vulnerabilities.\n\nSo, we can not embed by the raw url, [rawgit.com](http://rawgit.com/) solves this problem nicely. For each request, it retrieves the appropriate document from GitHub and, crucially, serves it with the correct Content-Type header.\n\nLink to your logo.svg using the following pattern:\n\n```\nhttps://cdn.rawgit.com/\u003crepo-owner\u003e/\u003crepo\u003e/\u003cbranch\u003e/path/to.svg\n```\n\nTo ensure that the CDN always serves the version of the file you want, use a git tag or commit hash in the file's path instead of a branch name, and update the URL if you push a new version of the file.\n\nSo, instead of a URL like `https://cdn.rawgit.com/user/repo/branch/file`, use a URL like `https://cdn.rawgit.com/user/repo/tag/file` or `https://cdn.rawgit.com/user/repo/commit/file`.\n\n\nThe embed code looks like:\n\n```mk\n![logo.svg](https://cdn.rawgit.com/\u003crepo-owner\u003e/\u003crepo\u003e/\u003cbranch\u003e/path/to.svg)\n\n\u003cimg alt=\"logo.svg\" width=\"500\" src=\"https://cdn.rawgit.com/\u003crepo-owner\u003e/\u003crepo\u003e/\u003cbranch\u003e/path/to.svg\"\u003e\n```\n\n## Demos\n\n```yaml\nfont: 'gubblebum-glocky.ttf'\nlogo: 'npm '\noutput: './demos/gubblebum-blocky/npm.svg'\npath:\n  fill: '#cb3837'\n```\n\n\u003cimg alt=\"npm\" width=\"450\" src=\"https://cdn.rawgit.com/bubkoo/logo.svg/3321802/demos/gubblebum-blocky/npm.svg\"\u003e\n\n```yaml\nlogo: 'divided'\nfont: 'origami-mommy.ttf'\noutput: './demos/origami-mommy/divided.svg'\ndivided: true\npath:\n  fill: '#6af72e'\npath1:\n  fill: '#c6e03c'\npath2:\n  fill: '#fc428f'\npath3:\n  fill: '#cea2fd'\npath4:\n  fill: '#fb3f24'\npath5:\n  fill: '#3cc8f6'\npath6:\n  fill: '#ff3e74'\n```\n\n![divided](https://cdn.rawgit.com/bubkoo/logo.svg/3321802/demos/origami-mommy/divided.svg)\n\n```yaml\nlogo: 'Blocked'\nfont: 'blocked.ttf'\noutput: './demos/blocked/blocked.svg'\npath:\n  fill: '#fc174f'\n```\n\n![blocked](https://cdn.rawgit.com/bubkoo/logo.svg/3321802/demos/blocked/blocked.svg)\n\n```yaml\nlogo: 'Square'\nfont: 'mk-zodnig-square.ttf'\nfontSize: 96\noutput: './demos/mk-zodnig-square/square.svg'\npath:\n  fill: '#fd742d'\n#  stroke: '#fd742d'\n```\n\n![square](https://cdn.rawgit.com/bubkoo/logo.svg/3321802/demos/mk-zodnig-square/square.svg)\n\n```yaml\nlogo: 'Gubblebum '\nfont: 'gubblebum.ttf'\noutput: './demos/gubblebum/gubblebum.svg'\nspacing: 10\ndivided: true\npath:\n  fill: '#6af72e'\npath0:\n  fill: '#fc428f'\n```\n\n![gubblebum](https://cdn.rawgit.com/bubkoo/logo.svg/3321802/demos/gubblebum/gubblebum.svg)\n\n\n## Related\n   \n- [text2svg](https://github.com/bubkoo/text2svg) Convert text to svg path.\n- [loadrc](https://github.com/bubkoo/loadrc) Load runtime configuration files for your module.\n\n\n## TODO\n\n- Support logo template.\n- What's your suggestion? Open an [issue](https://github.com/bubkoo/logo.svg/issues/new).\n\n\n## Contributing\n\nPull requests and stars are highly welcome.\n\nFor bugs and feature requests, please [create an issue](https://github.com/bubkoo/logo.svg/issues/new).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbubkoo%2Flogo.svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbubkoo%2Flogo.svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbubkoo%2Flogo.svg/lists"}