如果您同时需要 logo 命令和 JavaScript API，请以两种方式安装 logo.svg.js。
Usage
CLI
$ logo [options]
选项：
-l, --logo ??? ............. The logo text. Default is the `name` of the `package.json`.
-f, --font ??? ............. Specify the font path or url.
-s, --fontSize ??? ......... Specify the font size. Default `72`.
-o, --output ??? ........... Specify the output path. Default `logo.svg`
-c, --config ??? ........... Specify the `.logorc` file.
-O, --overwrite ............ Overwrite when a logo file exist. Default `true`.
-k, --kerning .............. Take kerning information into account. Default `true`.
-d, --divided .............. Generate individual path for every char. Default `false`.
-V, --version .............. Print the current version.
-h, --help ................. You're looking at it.
-h, --help ??? ............. Show details for the specified command.
示例：
$ logo
$ logo -Odo ./logo/logo.svg
$ logo --config ./logo/.logorc
$ logo --help
$ logo --help font
$ logo --help config
$ logo --version
JavaScript API
var logo = require('logo.svg');
// generate the svg string, then you can use it in you code
var svg = logo.generate(options);
Generate a svg logo, then you can embed it in you README.md
Feature:
Custom font, font size, letter spacing
Generate individual path for every char
Support any valid attributes and style
Handily cli
Install
To use the logo command, install it globally:
$ npm install logo.svg -g
To use the JavaScript API, install logo.svg locally:
$ npm install logo.svg --save
If you need both the logo command and the JavaScript API, install logo.svg.js both ways.
Usage
CLI
$ logo [options]
Options:
-l, --logo ??? ............. The logo text. Default is the `name` of the `package.json`.
-f, --font ??? ............. Specify the font path or url.
-s, --fontSize ??? ......... Specify the font size. Default `72`.
-o, --output ??? ........... Specify the output path. Default `logo.svg`
-c, --config ??? ........... Specify the `.logorc` file.
-O, --overwrite ............ Overwrite when a logo file exist. Default `true`.
-k, --kerning .............. Take kerning information into account. Default `true`.
-d, --divided .............. Generate individual path for every char. Default `false`.
-V, --version .............. Print the current version.
-h, --help ................. You're looking at it.
-h, --help ??? ............. Show details for the specified command.
Examples:
$ logo
$ logo -Odo ./logo/logo.svg
$ logo --config ./logo/.logorc
$ logo --help
$ logo --help font
$ logo --help config
$ logo --version
JavaScript API
var logo = require('logo.svg');
// generate the svg string, then you can use it in you code
var svg = logo.generate(options);
Options
font
The font's path or full url. If it's an url, we will load the font asynchronous then generate the logo.
If the path is relative, it is relative to the current work directory(process.cwd()).
If 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.
The preset folder is ./fonts/, contribute your fonts by pull request.
logo
The logo text. Default is the name in package.json.
x
Horizontal position of the beginning of the text. (default: 0)
y
Vertical position of the baseline of the text. (default: 0)
fontSize
Size of the text. (default: 72)
spacing
The letter spacing. (default: 0)
kerning
If true takes kerning information into account. (default: true)
divided
If true generates individual path for every char. (default: false)
grouped
If true groups the individual <path> with <g></g> element. (default: false)
title
If specified will generate a <title> at the root of <svg>. (default: logo)
desc
If specified will generate a <desc> at the root of <svg>. (default: null)
Styling the logo
Specify the padding of the <path> relative to the <svg>:
options.padding
options.paddingTop or options['padding-top']
options.paddingRight or options['padding-right']
options.paddingBottom or options['padding-bottom']
options.paddingLeft or options['padding-left']
The <svg>, <path> and <g> elements can be styled by any valid attributes.
The generated <svg> has the following default attributes:
options.svg = {
'version': '', // remove this attribute
'role' : 'logo', // update this attribute
'fill' : 'red' // add some custiom styles
}
Note that the width, height and viewbox can't be specified.
Styling the <path> by options.path. If divided is true we can style the individual <path> element by options.path?, which ? is the index of each char in the logo:
// style for every path(s)
options.path = {
'fill': yellow
};
// style the first char
options.path0 = {
'fill': '#FF0000',
'stroke': '#000000'
};
As the same options.g specified the style of <g> element.
.logorc
All the options can be specified in the following files:
.logorc.js
.logorc.yaml
.logorc.yml
.logorc.json
.logorc
The logo section in package.json
We will try to load configuration from these files order by order, stop until any file load succeed.
Example for .logorc:
font: Origami-Mommy-Pixellated.ttf
fontSzie: 72
output: logo.svg
# style the logo
path:
fill: '#6ccb99'
SVG does not work from README by design for security concerns …
We have had to disable svg image rendering on GitHub.com due to potential cross site scripting vulnerabilities.
So, we can not embed by the raw url, 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.
Link to your logo.svg using the following pattern:
To 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.
So, 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.
