You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
712 lines
17 KiB
712 lines
17 KiB
2 years ago
|
<p align="center">
|
||
|
|
<a href="https://github.com/jaywcjlove/svgtofont/">
|
||
|
|
<img src="https://user-images.githubusercontent.com/1680273/106147487-dfb22880-61b2-11eb-8462-4f443a4c2201.png" alt="SVG To Font" />
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p align="center">
|
||
|
|
<a href="https://github.com/jaywcjlove/svgtofont/actions">
|
||
|
|
<img src="https://github.com/jaywcjlove/svgtofont/workflows/Build/badge.svg" alt="Build & Deploy">
|
||
|
|
</a>
|
||
|
|
<a href="https://jaywcjlove.github.io/svgtofont/lcov-report/">
|
||
|
|
<img src="https://jaywcjlove.github.io/svgtofont/badges.svg" alt="Coverage Status">
|
||
|
|
</a>
|
||
|
|
<a href="https://gitee.com/jaywcjlove/svgtofont">
|
||
|
|
<img src="https://jaywcjlove.github.io/sb/ico/gitee.svg" alt="Gitee Repo">
|
||
|
|
</a>
|
||
|
|
<a href="https://uiwjs.github.io/npm-unpkg/#/pkg/svgtofont/file/README.md">
|
||
|
|
<img src="https://img.shields.io/badge/Open%20in-unpkg-blue" alt="Open in unpkg">
|
||
|
|
</a>
|
||
|
|
<a href="https://www.npmjs.com/package/svgtofont">
|
||
|
|
<img src="https://img.shields.io/npm/dm/svgtofont.svg?style=flat" alt="NPM Download">
|
||
|
|
</a>
|
||
|
|
<a href="https://www.npmjs.com/package/svgtofont">
|
||
|
|
<img src="https://img.shields.io/npm/v/svgtofont.svg" alt="npm version">
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font, Generator of fonts from SVG icons.
|
||
|
|
|
||
|
|
[Install](#install) · [Usage](#using-with-nodejs) · [Command](#using-with-command) · [Font Usage](#font-usage) · [API](#api) · [options](#options) · [npm](http://npm.im/svgtofont) · [License](#license)
|
||
|
|
|
||
|
|
**Features:**
|
||
|
|
|
||
|
|
- Supported font formats: `WOFF2`, `WOFF`, `EOT`, `TTF` and `SVG`.
|
||
|
|
- Support SVG Symbol file.
|
||
|
|
- Support [`React`](https://github.com/facebook/react) & [`TypeScript`](https://github.com/microsoft/TypeScript).
|
||
|
|
- Support [`Less`](https://github.com/less/less.js)/[`Sass`](https://github.com/sass/sass)/[`Stylus`](https://github.com/stylus/stylus).
|
||
|
|
- Allows to use custom templates (example `css`, `less` and etc).
|
||
|
|
- Automatically generate a preview site.
|
||
|
|
|
||
|
|
```bash
|
||
|
|
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
|
|
┆ Project ┆
|
||
|
|
┆ ┆
|
||
|
|
╭┈┈┈┈┈┈┈┈╮ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆
|
||
|
|
┆iconfont┆┈┈╮ ┆ ┆ svg ┆┈┈╮ ┆
|
||
|
|
╰┈┈┈┈┈┈┈┈╯ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆
|
||
|
|
├┈▶┆download svg┆┈┈▶┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆
|
||
|
|
╭┈┈┈┈┈┈┈┈╮ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆╭┈┈┆create font┆◀┈╯ ┆
|
||
|
|
┆icomoon ┆┈┈╯ ┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆
|
||
|
|
╰┈┈┈┈┈┈┈┈╯ ┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆
|
||
|
|
┆╰┈▶┆ use font ┆ ┆
|
||
|
|
┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆
|
||
|
|
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
|
|
```
|
||
|
|
|
||
|
|
**Icon Font Created By svgtofont**
|
||
|
|
|
||
|
|
- [file-icons](https://uiwjs.github.io/file-icons/) File icons in the file tree.
|
||
|
|
- [uiw-iconfont](https://github.com/uiwjs/icons) The premium icon font for [@uiwjs](https://github.com/uiwjs) Component Library. Support [`React`](https://github.com/facebook/react) & [`TypeScript`](https://github.com/microsoft/TypeScript).
|
||
|
|
- [Bootstrap Icons Font](https://github.com/uiwjs/bootstrap-icons) Official open source SVG icon library for Bootstrap.
|
||
|
|
- [test example](./test) For a simple test example, run `npm run test` in the root directory to see the results.
|
||
|
|
|
||
|
|
## Install
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm i svgtofont
|
||
|
|
```
|
||
|
|
|
||
|
|
#### Using With Command
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
"scripts": {
|
||
|
|
"font": "svgtofont --sources ./svg --output ./font --fontName uiw-font"
|
||
|
|
},
|
||
|
|
"svgtofont": {
|
||
|
|
"css": {
|
||
|
|
"fontSize": "12px"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
You can add configuration to package.json. [#48](https://github.com/jaywcjlove/svgtofont/issues/48)
|
||
|
|
|
||
|
|
Supports `.svgtofontrc` Configuration File.
|
||
|
|
|
||
|
|
```js
|
||
|
|
{
|
||
|
|
"fontName": "svgtofont",
|
||
|
|
"css": true
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### Using With Nodejs
|
||
|
|
|
||
|
|
```js
|
||
|
|
const svgtofont = require('svgtofont');
|
||
|
|
const path = require('path');
|
||
|
|
|
||
|
|
svgtofont({
|
||
|
|
src: path.resolve(process.cwd(), 'icon'), // svg path
|
||
|
|
dist: path.resolve(process.cwd(), 'fonts'), // output path
|
||
|
|
fontName: 'svgtofont', // font name
|
||
|
|
css: true, // Create CSS files.
|
||
|
|
}).then(() => {
|
||
|
|
console.log('done!');
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
Or
|
||
|
|
|
||
|
|
```js
|
||
|
|
const svgtofont = require("svgtofont");
|
||
|
|
const path = require("path");
|
||
|
|
|
||
|
|
svgtofont({
|
||
|
|
src: path.resolve(process.cwd(), "icon"), // svg path
|
||
|
|
dist: path.resolve(process.cwd(), "fonts"), // output path
|
||
|
|
styleTemplates: path.resolve(rootPath, "styles"), // file templates path (optional)
|
||
|
|
fontName: "svgtofont", // font name
|
||
|
|
css: true, // Create CSS files.
|
||
|
|
startUnicode: 0xea01, // unicode start number
|
||
|
|
svgicons2svgfont: {
|
||
|
|
fontHeight: 1000,
|
||
|
|
normalize: true
|
||
|
|
},
|
||
|
|
// website = null, no demo html files
|
||
|
|
website: {
|
||
|
|
title: "svgtofont",
|
||
|
|
// Must be a .svg format image.
|
||
|
|
logo: path.resolve(process.cwd(), "svg", "git.svg"),
|
||
|
|
version: pkg.version,
|
||
|
|
meta: {
|
||
|
|
description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
|
||
|
|
keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG"
|
||
|
|
},
|
||
|
|
description: ``,
|
||
|
|
// Add a Github corner to your website
|
||
|
|
// Like: https://github.com/uiwjs/react-github-corners
|
||
|
|
corners: {
|
||
|
|
url: 'https://github.com/jaywcjlove/svgtofont',
|
||
|
|
width: 62, // default: 60
|
||
|
|
height: 62, // default: 60
|
||
|
|
bgColor: '#dc3545' // default: '#151513'
|
||
|
|
},
|
||
|
|
links: [
|
||
|
|
{
|
||
|
|
title: "GitHub",
|
||
|
|
url: "https://github.com/jaywcjlove/svgtofont"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Feedback",
|
||
|
|
url: "https://github.com/jaywcjlove/svgtofont/issues"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Font Class",
|
||
|
|
url: "index.html"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Unicode",
|
||
|
|
url: "unicode.html"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
footerInfo: `Licensed under MIT. (Yes it's free and <a href="https://github.com/jaywcjlove/svgtofont">open-sourced</a>`
|
||
|
|
}
|
||
|
|
}).then(() => {
|
||
|
|
console.log('done!');
|
||
|
|
});;
|
||
|
|
```
|
||
|
|
|
||
|
|
## API
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { createSVG, createTTF, createEOT, createWOFF, createWOFF2, createSvgSymbol, copyTemplate, createHTML } from 'svgtofont/lib/utils';
|
||
|
|
|
||
|
|
const options = { ... };
|
||
|
|
|
||
|
|
async function creatFont() {
|
||
|
|
const unicodeObject = await createSVG(options);
|
||
|
|
const ttf = await createTTF(options); // SVG Font => TTF
|
||
|
|
await createEOT(options, ttf); // TTF => EOT
|
||
|
|
await createWOFF(options, ttf); // TTF => WOFF
|
||
|
|
await createWOFF2(options, ttf); // TTF => WOFF2
|
||
|
|
await createSvgSymbol(options); // SVG Files => SVG Symbol
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## options
|
||
|
|
|
||
|
|
> svgtofont(options)
|
||
|
|
|
||
|
|
### log
|
||
|
|
|
||
|
|
> Type: `Boolean`
|
||
|
|
|
||
|
|
A value of `false` disables logging
|
||
|
|
|
||
|
|
### logger
|
||
|
|
|
||
|
|
> Type: `(msg) => void`
|
||
|
|
|
||
|
|
log callback function
|
||
|
|
|
||
|
|
### dist
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
> Default value: ~~`dist`~~ => `fonts`
|
||
|
|
|
||
|
|
The output directory.
|
||
|
|
|
||
|
|
### outSVGReact
|
||
|
|
|
||
|
|
> Type: `Boolean`
|
||
|
|
> Default value: `false`
|
||
|
|
|
||
|
|
Output `./dist/react/`, SVG generates `react` components.
|
||
|
|
|
||
|
|
```js
|
||
|
|
git/git.svg
|
||
|
|
|
||
|
|
// ↓↓↓↓↓↓↓↓↓↓
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
export const Git = props => (
|
||
|
|
<svg viewBox="0 0 20 20" {...props}><path d="M2.6 10.59L8.38 4.8l1.69 -." fillRule="evenodd" /></svg>
|
||
|
|
);
|
||
|
|
```
|
||
|
|
|
||
|
|
### outSVGPath
|
||
|
|
|
||
|
|
> Type: `Boolean`
|
||
|
|
> Default value: `false`
|
||
|
|
|
||
|
|
Output `./dist/svgtofont.json`, The content is as follows:
|
||
|
|
|
||
|
|
```js
|
||
|
|
{
|
||
|
|
"adobe": ["M14.868 3H23v19L14.868 3zM1 3h8.138L1 22V3zm.182 11.997H13.79l-1.551-3.82H8.447z...."],
|
||
|
|
"git": ["M2.6 10.59L8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1..."],
|
||
|
|
"stylelint": ["M129.74 243.648c28-100.109 27.188-100.5.816c2.65..."]
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Or you can generate the file separately:
|
||
|
|
|
||
|
|
```js
|
||
|
|
const { generateIconsSource } = require('svgtofont/src/generate');
|
||
|
|
const path = require('path');
|
||
|
|
|
||
|
|
async function generate () {
|
||
|
|
const outPath = await generateIconsSource({
|
||
|
|
src: path.resolve(process.cwd(), 'svg'),
|
||
|
|
dist: path.resolve(process.cwd(), 'dist'),
|
||
|
|
fontName: 'svgtofont',
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
generate();
|
||
|
|
```
|
||
|
|
|
||
|
|
### generateInfoData
|
||
|
|
|
||
|
|
> Type: `Boolean`
|
||
|
|
> Default value: `false`
|
||
|
|
|
||
|
|
Output `./dist/info.json`, The content is as follows:
|
||
|
|
|
||
|
|
```js
|
||
|
|
{
|
||
|
|
"adobe": {
|
||
|
|
"encodedCode": "\\ea01",
|
||
|
|
"prefix": "svgtofont",
|
||
|
|
"className": "svgtofont-adobe",
|
||
|
|
"unicode": ""
|
||
|
|
},
|
||
|
|
...
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### src
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
> Default value: `svg`
|
||
|
|
|
||
|
|
output path
|
||
|
|
|
||
|
|
### emptyDist
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
> Default value: `false`
|
||
|
|
|
||
|
|
Clear output directory contents
|
||
|
|
|
||
|
|
### fontName
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
> Default value: `iconfont`
|
||
|
|
|
||
|
|
The font family name you want.
|
||
|
|
|
||
|
|
### styleTemplates
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
> Default value: `undefined`
|
||
|
|
|
||
|
|
The path of the templates, see `src/styles` or `test/templates/styles` to get reference about
|
||
|
|
how to create a template, file names can have the extension .template, like a `filename.scss.template`
|
||
|
|
|
||
|
|
### startUnicode
|
||
|
|
|
||
|
|
> Type: `Number`
|
||
|
|
> Default value: `0xea01`
|
||
|
|
|
||
|
|
unicode start number
|
||
|
|
|
||
|
|
### useNameAsUnicode
|
||
|
|
|
||
|
|
> Type: `Boolean`
|
||
|
|
> Default value: `false`
|
||
|
|
|
||
|
|
should the name(file name) be used as unicode? this switch allows for the support of ligatures.
|
||
|
|
|
||
|
|
let's say you have an svg with a file name of `add` and you want to use ligatures for it. you would set up your processing as mentioned above and turn on this switch.
|
||
|
|
```js
|
||
|
|
{
|
||
|
|
...
|
||
|
|
useNameAsUnicode: true
|
||
|
|
}
|
||
|
|
```
|
||
|
|
while processing, instead of using a single sequential char for the unicode, it uses the file name. using the file name as the unicode allows the following code to work as expected.
|
||
|
|
```css
|
||
|
|
.icons {
|
||
|
|
font-family: 'your-font-icon-name' !important;
|
||
|
|
font-size: 16px;
|
||
|
|
font-style: normal;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
```html
|
||
|
|
<i class="icons">add</i>
|
||
|
|
```
|
||
|
|
as you add more svgs and process them into your font you would just use the same pattern.
|
||
|
|
```html
|
||
|
|
<i class="icons">add</i>
|
||
|
|
<i class="icons">remove</i>
|
||
|
|
<i class="icons">edit</i>
|
||
|
|
```
|
||
|
|
|
||
|
|
### classNamePrefix
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
> Default value: font name
|
||
|
|
|
||
|
|
Create font class name prefix, default value font name.
|
||
|
|
|
||
|
|
### css
|
||
|
|
|
||
|
|
> Type: `Boolean|CSSOptions`
|
||
|
|
> Default value: `false`
|
||
|
|
|
||
|
|
Create CSS/LESS files, default `true`.
|
||
|
|
|
||
|
|
```ts
|
||
|
|
type CSSOptions = {
|
||
|
|
/**
|
||
|
|
* Output the css file to the specified directory
|
||
|
|
*/
|
||
|
|
output?: string;
|
||
|
|
/**
|
||
|
|
* Which files are exported.
|
||
|
|
*/
|
||
|
|
include?: RegExp;
|
||
|
|
/**
|
||
|
|
* Setting font size.
|
||
|
|
*/
|
||
|
|
fontSize?: string;
|
||
|
|
/**
|
||
|
|
* Set the path in the css file
|
||
|
|
* https://github.com/jaywcjlove/svgtofont/issues/48#issuecomment-739547189
|
||
|
|
*/
|
||
|
|
cssPath?: string
|
||
|
|
/**
|
||
|
|
* Set file name
|
||
|
|
* https://github.com/jaywcjlove/svgtofont/issues/48#issuecomment-739547189
|
||
|
|
*/
|
||
|
|
fileName?: string
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### svgicons2svgfont
|
||
|
|
|
||
|
|
This is the setting for [svgicons2svgfont](https://github.com/nfroidure/svgicons2svgfont/tree/dd713bea4f97afa59f7dba6a21ff7f22db565bcf#api)
|
||
|
|
|
||
|
|
|
||
|
|
#### svgicons2svgfont.fontName
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
> Default value: `'iconfont'`
|
||
|
|
|
||
|
|
The font family name you want.
|
||
|
|
|
||
|
|
#### svgicons2svgfont.fontId
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
> Default value: the options.fontName value
|
||
|
|
|
||
|
|
The font id you want.
|
||
|
|
|
||
|
|
#### svgicons2svgfont.fontStyle
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
> Default value: `''`
|
||
|
|
|
||
|
|
The font style you want.
|
||
|
|
|
||
|
|
#### svgicons2svgfont.fontWeight
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
> Default value: `''`
|
||
|
|
|
||
|
|
The font weight you want.
|
||
|
|
|
||
|
|
#### svgicons2svgfont.fixedWidth
|
||
|
|
|
||
|
|
> Type: `Boolean`
|
||
|
|
> Default value: `false`
|
||
|
|
|
||
|
|
Creates a monospace font of the width of the largest input icon.
|
||
|
|
|
||
|
|
#### svgicons2svgfont.centerHorizontally
|
||
|
|
|
||
|
|
> Type: `Boolean`
|
||
|
|
> Default value: `false`
|
||
|
|
|
||
|
|
Calculate the bounds of a glyph and center it horizontally.
|
||
|
|
|
||
|
|
#### svgicons2svgfont.normalize
|
||
|
|
|
||
|
|
> Type: `Boolean`
|
||
|
|
> Default value: `false`
|
||
|
|
|
||
|
|
Normalize icons by scaling them to the height of the highest icon.
|
||
|
|
|
||
|
|
#### svgicons2svgfont.fontHeight
|
||
|
|
|
||
|
|
> Type: `Number`
|
||
|
|
> Default value: `MAX(icons.height)`
|
||
|
|
|
||
|
|
The outputted font height (defaults to the height of the highest input icon).
|
||
|
|
|
||
|
|
#### svgicons2svgfont.round
|
||
|
|
|
||
|
|
> Type: `Number`
|
||
|
|
> Default value: `10e12`
|
||
|
|
|
||
|
|
Setup SVG path rounding.
|
||
|
|
|
||
|
|
#### svgicons2svgfont.descent
|
||
|
|
|
||
|
|
> Type: `Number`
|
||
|
|
> Default value: `0`
|
||
|
|
|
||
|
|
The font descent. It is useful to fix the font baseline yourself.
|
||
|
|
|
||
|
|
**Warning:** The descent is a positive value!
|
||
|
|
|
||
|
|
#### svgicons2svgfont.ascent
|
||
|
|
|
||
|
|
> Type: `Number`
|
||
|
|
> Default value: `fontHeight - descent`
|
||
|
|
|
||
|
|
The font ascent. Use this options only if you know what you're doing. A suitable
|
||
|
|
value for this is computed for you.
|
||
|
|
|
||
|
|
#### svgicons2svgfont.metadata
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
> Default value: `undefined`
|
||
|
|
|
||
|
|
The font [metadata](http://www.w3.org/TR/SVG/metadata.html). You can set any
|
||
|
|
character data in but it is the be suited place for a copyright mention.
|
||
|
|
|
||
|
|
#### svgicons2svgfont.log
|
||
|
|
|
||
|
|
> Type: `Function`
|
||
|
|
> Default value: `console.log`
|
||
|
|
|
||
|
|
Allows you to provide your own logging function. Set to `function(){}` to
|
||
|
|
disable logging.
|
||
|
|
|
||
|
|
### svgoOptions
|
||
|
|
|
||
|
|
> Type: `OptimizeOptions`
|
||
|
|
> Default value: `undefined`
|
||
|
|
|
||
|
|
Some options can be configured with `svgoOptions` though it. [svgo](https://github.com/svg/svgo#configuration)
|
||
|
|
### svg2ttf
|
||
|
|
|
||
|
|
This is the setting for [svg2ttf](https://github.com/fontello/svg2ttf/tree/c33a126920f46b030e8ce960cc7a0e38a6946bbc#svg2ttfsvgfontstring-options---buf)
|
||
|
|
|
||
|
|
#### svg2ttf.copyright
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
|
||
|
|
copyright string
|
||
|
|
|
||
|
|
#### svg2ttf.ts
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
|
||
|
|
Unix timestamp (in seconds) to override creation time
|
||
|
|
|
||
|
|
#### svg2ttf.version
|
||
|
|
|
||
|
|
> Type: `Number`
|
||
|
|
|
||
|
|
font version string, can be Version `x.y` or `x.y`.
|
||
|
|
|
||
|
|
### website
|
||
|
|
|
||
|
|
Define preview web content. Example:
|
||
|
|
|
||
|
|
```js
|
||
|
|
{
|
||
|
|
...
|
||
|
|
// website = null, no demo html files
|
||
|
|
website: {
|
||
|
|
title: "svgtofont",
|
||
|
|
logo: path.resolve(process.cwd(), "svg", "git.svg"),
|
||
|
|
version: pkg.version,
|
||
|
|
meta: {
|
||
|
|
description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
|
||
|
|
keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG",
|
||
|
|
favicon: "./favicon.png"
|
||
|
|
},
|
||
|
|
// Add a Github corner to your website
|
||
|
|
// Like: https://github.com/uiwjs/react-github-corners
|
||
|
|
corners: {
|
||
|
|
url: 'https://github.com/jaywcjlove/svgtofont',
|
||
|
|
width: 62, // default: 60
|
||
|
|
height: 62, // default: 60
|
||
|
|
bgColor: '#dc3545' // default: '#151513'
|
||
|
|
},
|
||
|
|
links: [
|
||
|
|
{
|
||
|
|
title: "GitHub",
|
||
|
|
url: "https://github.com/jaywcjlove/svgtofont"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Feedback",
|
||
|
|
url: "https://github.com/jaywcjlove/svgtofont/issues"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Font Class",
|
||
|
|
url: "index.html"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Unicode",
|
||
|
|
url: "unicode.html"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### website.template
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
> Default value: [index.ejs](src/website/index.ejs)
|
||
|
|
|
||
|
|
Custom template can customize parameters. You can define your own template based on the [default template](src/website/index.ejs).
|
||
|
|
|
||
|
|
```js
|
||
|
|
{
|
||
|
|
website: {
|
||
|
|
template: path.join(process.cwd(), "my-template.ejs")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
#### website.index
|
||
|
|
|
||
|
|
> Type: `String`
|
||
|
|
> Default value: `font-class`, Enum{`font-class`, `unicode`, `symbol`}
|
||
|
|
|
||
|
|
Set default home page.
|
||
|
|
|
||
|
|
## Font Usage
|
||
|
|
|
||
|
|
Suppose the font name is defined as `svgtofont`, The default home page is `unicode`, Will generate:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
font-class.html
|
||
|
|
index.html
|
||
|
|
svgtofont.css
|
||
|
|
svgtofont.eot
|
||
|
|
svgtofont.json
|
||
|
|
svgtofont.less
|
||
|
|
svgtofont.module.less
|
||
|
|
svgtofont.scss
|
||
|
|
svgtofont.styl
|
||
|
|
svgtofont.svg
|
||
|
|
svgtofont.symbol.svg
|
||
|
|
svgtofont.ttf
|
||
|
|
svgtofont.woff
|
||
|
|
svgtofont.woff2
|
||
|
|
symbol.html
|
||
|
|
```
|
||
|
|
|
||
|
|
Preview demo `font-class.html`, `symbol.html` and `index.html`. Automatically generated style `svgtofont.css` and `svgtofont.less`.
|
||
|
|
|
||
|
|
### symbol svg
|
||
|
|
|
||
|
|
```xml
|
||
|
|
<svg class="icon" aria-hidden="true">
|
||
|
|
<use xlink:href="svgtofont.symbol.svg#svgtofont-git"></use>
|
||
|
|
</svg>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Unicode
|
||
|
|
|
||
|
|
```html
|
||
|
|
<style>
|
||
|
|
.iconfont {
|
||
|
|
font-family: "svgtofont-iconfont" !important;
|
||
|
|
font-size: 16px;
|
||
|
|
font-style: normal;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-webkit-text-stroke-width: 0.2px;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<span class="iconfont"></span>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Class Name
|
||
|
|
|
||
|
|
Support for `.less` and `.css` styles references.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<link rel="stylesheet" type="text/css" href="node_modules/fonts/svgtofont.css">
|
||
|
|
<i class="svgtofont-apple"></i>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Using With React
|
||
|
|
|
||
|
|
Icons are used as components. `v3.16.7+` support.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import { Adobe, Alipay } from '@uiw/icons';
|
||
|
|
|
||
|
|
<Adobe style={{ fill: 'red' }} />
|
||
|
|
<Alipay height="36" />
|
||
|
|
```
|
||
|
|
|
||
|
|
#### In the project created by [create-react-app](https://github.com/facebook/create-react-app)
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import logo from './logo.svg';
|
||
|
|
|
||
|
|
<img src={logo} />
|
||
|
|
```
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import { ReactComponent as ComLogo } from './logo.svg';
|
||
|
|
|
||
|
|
<ComLogo />
|
||
|
|
```
|
||
|
|
|
||
|
|
#### In the project created by [webpack](https://github.com/webpack/webpack)
|
||
|
|
|
||
|
|
```bash
|
||
|
|
yarn add babel-plugin-named-asset-import
|
||
|
|
yarn add @svgr/webpack
|
||
|
|
```
|
||
|
|
|
||
|
|
```js
|
||
|
|
// webpack.config.js
|
||
|
|
[
|
||
|
|
require.resolve('babel-plugin-named-asset-import'),
|
||
|
|
{
|
||
|
|
loaderMap: {
|
||
|
|
svg: {
|
||
|
|
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
```
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import { ReactComponent as ComLogo } from './logo.svg';
|
||
|
|
|
||
|
|
<ComLogo />
|
||
|
|
```
|
||
|
|
|
||
|
|
## Contributors
|
||
|
|
|
||
|
|
As always, thanks to our amazing contributors!
|
||
|
|
|
||
|
|
<a href="https://github.com/jaywcjlove/svgtofont/graphs/contributors">
|
||
|
|
<img src="https://jaywcjlove.github.io/svgtofont/CONTRIBUTORS.svg" />
|
||
|
|
</a>
|
||
|
|
|
||
|
|
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
|
||
|
|
|
||
|
|
## License
|
||
|
|
|
||
|
|
Licensed under the [MIT License](https://opensource.org/licenses/MIT).
|