Gathering detailed insights and metrics for svgtofont
Gathering detailed insights and metrics for svgtofont
Gathering detailed insights and metrics for svgtofont
Gathering detailed insights and metrics for svgtofont
npm install svgtofont
Typescript
Module System
Min. Node Version
Node Version
NPM Version
33.4
Supply Chain
93.3
Quality
90.9
Maintenance
100
Vulnerability
96.1
License
Total
2,039,837
Last Day
881
Last Week
27,917
Last Month
109,734
Last Year
1,162,804
611 Stars
481 Commits
87 Forks
9 Watching
5 Branches
16 Contributors
Updated on 07 Dec 2024
TypeScript (73.82%)
Nunjucks (14.24%)
JavaScript (7.83%)
Less (1.49%)
SCSS (0.95%)
Stylus (0.95%)
CSS (0.73%)
Cumulative downloads
Total Downloads
Last day
-15%
881
Compared to previous day
Last week
21.5%
27,917
Compared to previous week
Last month
-9.5%
109,734
Compared to previous month
Last year
88.2%
1,162,804
Compared to previous year
Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font, Generator of fonts from SVG icons.
Install · Usage · Command · Font Usage · API · options · npm · License
Features:
WOFF2
, WOFF
, EOT
, TTF
and SVG
.React
, ReactNative
& TypeScript
.Less
/Sass
/Stylus
.css
, less
and etc).1 ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ 2 ┆ Project ┆ 3 ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ 4╭┈┈┈┈┈┈┈┈╮ ┆ ┆ svg ┆┈┈╮ ┆ 5┆iconfont┆┈┈╮ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ 6╰┈┈┈┈┈┈┈┈╯ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ 7 ├┈▶┆download svg┆┈┈▶┆ ┆┈svgtofont┈┆ ┆ ┆ 8╭┈┈┈┈┈┈┈┈╮ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆╭┈┈┆create font┆◀┈╯ ┆ 9┆icomoon ┆┈┈╯ ┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ 10╰┈┈┈┈┈┈┈┈╯ ┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ 11 ┆╰┈▶┆ use font ┆ ┆ 12 ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ 13 ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
1graph LR; 2 A[iconfont]-->C[Download SVG]; 3 B[icomoon]-->C; 4 D[icongo]-->C; 5 E[yesicon]-->C; 6 click A "https://www.iconfont.cn" "阿里巴巴矢量图标库" _blank 7 click B "https://icomoon.io" "Pixel Perfect Icon Solutions" _blank 8 click D "https://icongo.github.io" "Include popular icons in your React projects easily icons." _blank 9 click E "https://yesicon.app/" "216,162 High-Quality Vector Icons from Top Design Teams." _blank 10 C .-> ide1 11 subgraph ide1 [Project] 12 svg -->a2[svgtofont\ncreate font] 13 a2 .-> b3[use font] 14 end
Icon Font Created By svgtofont
React
& TypeScript
.npm run test
in the root directory to see the results.1npm i svgtofont
[!NOTE]
This packagev5+
is ESM only: Node 18+ is needed to use it and it must beimport
instead ofrequire
.1import svgtofont from 'svgtofont';
1{ 2 "scripts": { 3 "font": "svgtofont --sources ./svg --output ./font --fontName uiw-font" 4 }, 5 "svgtofont": { 6 "css": { 7 "fontSize": "12px" 8 } 9 } 10}
You can add configuration to package.json. #48
Support for .svgtofontrc
and more configuration files.
1{ 2 "fontName": "svgtofont", 3 "css": true 4}
1/** 2 * @type {import('svgtofont').SvgToFontOptions} 3 */ 4export default { 5 fontName: "iconfont", 6}
[!NOTE]
This packagev5+
is now pure ESM. Please read this.
1import svgtofont from 'svgtofont'; 2import path from 'node:path'; 3 4svgtofont({ 5 src: path.resolve(process.cwd(), 'icon'), // svg path 6 dist: path.resolve(process.cwd(), 'fonts'), // output path 7 fontName: 'svgtofont', // font name 8 css: true, // Create CSS files. 9}).then(() => { 10 console.log('done!'); 11});
Or
1import svgtofont from 'svgtofont'; 2import path from 'node:path'; 3 4svgtofont({ 5 src: path.resolve(process.cwd(), "icon"), // svg path 6 dist: path.resolve(process.cwd(), "fonts"), // output path 7 styleTemplates: path.resolve(rootPath, "styles"), // file templates path (optional) 8 fontName: "svgtofont", // font name 9 css: true, // Create CSS files. 10 startUnicode: 0xea01, // unicode start number 11 svgicons2svgfont: { 12 fontHeight: 1000, 13 normalize: true 14 }, 15 // website = null, no demo html files 16 website: { 17 title: "svgtofont", 18 // Must be a .svg format image. 19 logo: path.resolve(process.cwd(), "svg", "git.svg"), 20 version: pkg.version, 21 meta: { 22 description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.", 23 keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG" 24 }, 25 description: ``, 26 // Add a Github corner to your website 27 // Like: https://github.com/uiwjs/react-github-corners 28 corners: { 29 url: 'https://github.com/jaywcjlove/svgtofont', 30 width: 62, // default: 60 31 height: 62, // default: 60 32 bgColor: '#dc3545' // default: '#151513' 33 }, 34 links: [ 35 { 36 title: "GitHub", 37 url: "https://github.com/jaywcjlove/svgtofont" 38 }, 39 { 40 title: "Feedback", 41 url: "https://github.com/jaywcjlove/svgtofont/issues" 42 }, 43 { 44 title: "Font Class", 45 url: "index.html" 46 }, 47 { 48 title: "Unicode", 49 url: "unicode.html" 50 } 51 ], 52 footerInfo: `Licensed under MIT. (Yes it's free and <a href="https://github.com/jaywcjlove/svgtofont">open-sourced</a>` 53 } 54}).then(() => { 55 console.log('done!'); 56});;
1import { createSVG, createTTF, createEOT, createWOFF, createWOFF2, createSvgSymbol, copyTemplate, createHTML } from 'svgtofont/lib/utils';
2
3const options = { ... };
4
5async function creatFont() {
6 const unicodeObject = await createSVG(options);
7 const ttf = await createTTF(options); // SVG Font => TTF
8 await createEOT(options, ttf); // TTF => EOT
9 await createWOFF(options, ttf); // TTF => WOFF
10 await createWOFF2(options, ttf); // TTF => WOFF2
11 await createSvgSymbol(options); // SVG Files => SVG Symbol
12}
svgtofont(options)
Type:
config?: AutoConfOption<SvgToFontOptions>
By default, settings are automatically loaded from .svgtofontrc
and package.json
. You can add configuration to package.json
. #48
Support for .svgtofontrc
and more configuration files.
Type:
Boolean
A value of false
disables logging
Type:
(msg) => void
log callback function
Type:
String
Default value:=>dist
fonts
The output directory.
Type:
Boolean
Default value:false
Output ./dist/react/
, SVG generates react
components.
1git/git.svg 2 3// ↓↓↓↓↓↓↓↓↓↓ 4 5import React from 'react'; 6export const Git = props => ( 7 <svg viewBox="0 0 20 20" {...props}><path d="M2.6 10.59L8.38 4.8l1.69 -." fillRule="evenodd" /></svg> 8);
Type:
Boolean
Default value:false
Output ./dist/reactNative/
, SVG generates reactNative
components.
1import { Text } from 'react-native'; 2 3const icons = { "Git": "__GitUnicodeChar__", "Adobe": "__AdobeUnicodeChar__" }; 4 5export const RangeIconFont = props => { 6 const { name, ...rest } = props; 7 return (<Text style={{ fontFamily: 'svgtofont', fontSize: 16, color: '#000000', ...rest }}> 8 {icons[name]} 9 </Text>); 10}; 11
Type:
Boolean
Default value:false
Output ./dist/svgtofont.json
, The content is as follows:
1{ 2 "adobe": ["M14.868 3H23v19L14.868 3zM1 3h8.138L1 22V3zm.182 11.997H13.79l-1.551-3.82H8.447z...."], 3 "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..."], 4 "stylelint": ["M129.74 243.648c28-100.109 27.188-100.5.816c2.65..."] 5}
Or you can generate the file separately:
1const { generateIconsSource } = require('svgtofont/src/generate'); 2const path = require('path'); 3 4async function generate () { 5 const outPath = await generateIconsSource({ 6 src: path.resolve(process.cwd(), 'svg'), 7 dist: path.resolve(process.cwd(), 'dist'), 8 fontName: 'svgtofont', 9 }); 10} 11 12generate();
Type:
Boolean
Default value:false
Output ./dist/info.json
, The content is as follows:
1{ 2 "adobe": { 3 "encodedCode": "\\ea01", 4 "prefix": "svgtofont", 5 "className": "svgtofont-adobe", 6 "unicode": "" 7 }, 8 ... 9}
Type:
String
Default value:svg
output path
Type:
String
Default value:false
Clear output directory contents
Type:
String
Default value:iconfont
The font family name you want.
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
Type:
Number
Default value:0xea01
unicode start number
Get Icon Unicode
1getIconUnicode?: (name: string, unicode: string, startUnicode: number) 2 => [string, number];
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.
1{ 2 ... 3 useNameAsUnicode: true 4}
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.
1.icons { 2 font-family: 'your-font-icon-name' !important; 3 font-size: 16px; 4 font-style: normal; 5 -webkit-font-smoothing: antialiased; 6 -moz-osx-font-smoothing: grayscale; 7}
1<i class="icons">add</i>
as you add more svgs and process them into your font you would just use the same pattern.
1<i class="icons">add</i> 2<i class="icons">remove</i> 3<i class="icons">edit</i>
Type:
Boolean
Default value:false
consoles whenever {{ cssString }} template outputs unicode characters or css vars
Type:
String
Default value: font name
Create font class name prefix, default value font name.
Type:
Boolean|CSSOptions
Default value:false
Create CSS/LESS files, default true
.
1type CSSOptions = { 2 /** 3 * Output the css file to the specified directory 4 */ 5 output?: string; 6 /** 7 * Which files are exported. 8 */ 9 include?: RegExp; 10 /** 11 * Setting font size. 12 */ 13 fontSize?: string | boolean; 14 /** 15 * Set the path in the css file 16 * https://github.com/jaywcjlove/svgtofont/issues/48#issuecomment-739547189 17 */ 18 cssPath?: string; 19 /** 20 * Set file name 21 * https://github.com/jaywcjlove/svgtofont/issues/48#issuecomment-739547189 22 */ 23 fileName?: string; 24 /** 25 * Ad hoc template variables. 26 */ 27 templateVars?: Record<string, any>; 28 /** 29 * When including CSS files in a CSS file, 30 * you can add a timestamp parameter or custom text to the file path to prevent browser caching issues and ensure style updates are applied. @default true 31 * @example `path/to/iconfont.css?t=1612345678` 32 */ 33 hasTimestamp?: boolean | string; 34}
This is the setting for svgicons2svgfont
Type:
String
Default value:'iconfont'
The font family name you want.
Type:
String
Default value: the options.fontName value
The font id you want.
Type:
String
Default value:''
The font style you want.
Type:
String
Default value:''
The font weight you want.
Type:
Boolean
Default value:false
Creates a monospace font of the width of the largest input icon.
Type:
Boolean
Default value:false
Calculate the bounds of a glyph and center it horizontally.
Type:
Boolean
Default value:false
Normalize icons by scaling them to the height of the highest icon.
Type:
Number
Default value:MAX(icons.height)
The outputted font height (defaults to the height of the highest input icon).
Type:
Number
Default value:10e12
Setup SVG path rounding.
Type:
Number
Default value:0
The font descent. It is useful to fix the font baseline yourself.
Warning: The descent is a positive value!
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.
Type:
String
Default value:undefined
The font metadata. You can set any character data in but it is the be suited place for a copyright mention.
Type:
Function
Default value:console.log
Allows you to provide your own logging function. Set to function(){}
to
disable logging.
Type:
OptimizeOptions
Default value:undefined
Some options can be configured with svgoOptions
though it. svgo
This is the setting for svg2ttf
Type:
String
copyright string
Type:
String
Unix timestamp (in seconds) to override creation time
Type:
Number
font version string, can be Version x.y
or x.y
.
Define preview web content. Example:
1{ 2 ... 3 // website = null, no demo html files 4 website: { 5 title: "svgtofont", 6 logo: path.resolve(process.cwd(), "svg", "git.svg"), 7 version: pkg.version, 8 meta: { 9 description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.", 10 keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG", 11 favicon: "./favicon.png" 12 }, 13 // Add a Github corner to your website 14 // Like: https://github.com/uiwjs/react-github-corners 15 corners: { 16 url: 'https://github.com/jaywcjlove/svgtofont', 17 width: 62, // default: 60 18 height: 62, // default: 60 19 bgColor: '#dc3545' // default: '#151513' 20 }, 21 links: [ 22 { 23 title: "GitHub", 24 url: "https://github.com/jaywcjlove/svgtofont" 25 }, 26 { 27 title: "Feedback", 28 url: "https://github.com/jaywcjlove/svgtofont/issues" 29 }, 30 { 31 title: "Font Class", 32 url: "index.html" 33 }, 34 { 35 title: "Unicode", 36 url: "unicode.html" 37 } 38 ] 39 } 40}
Type:
String
Default value: index.njk
Custom template can customize parameters. You can define your own template based on the default template.
1{ 2 website: { 3 template: path.join(process.cwd(), "my-template.njk") 4 } 5}
Type:
String
Default value:font-class
, Enum{font-class
,unicode
,symbol
}
Set default home page.
Suppose the font name is defined as svgtofont
, The default home page is unicode
, Will generate:
1font-class.html 2index.html 3svgtofont.css 4svgtofont.eot 5svgtofont.json 6svgtofont.less 7svgtofont.module.less 8svgtofont.scss 9svgtofont.styl 10svgtofont.svg 11svgtofont.symbol.svg 12svgtofont.ttf 13svgtofont.woff 14svgtofont.woff2 15symbol.html
Preview demo font-class.html
, symbol.html
and index.html
. Automatically generated style svgtofont.css
and svgtofont.less
.
1<svg class="icon" aria-hidden="true"> 2 <use xlink:href="svgtofont.symbol.svg#svgtofont-git"></use> 3</svg>
1<style> 2.iconfont { 3 font-family: "svgtofont-iconfont" !important; 4 font-size: 16px; 5 font-style: normal; 6 -webkit-font-smoothing: antialiased; 7 -webkit-text-stroke-width: 0.2px; 8 -moz-osx-font-smoothing: grayscale; 9} 10</style> 11<span class="iconfont"></span>
Support for .less
and .css
styles references.
1<link rel="stylesheet" type="text/css" href="node_modules/fonts/svgtofont.css"> 2<i class="svgtofont-apple"></i>
Icons are used as components. v3.16.7+
support.
1import { Adobe, Alipay } from '@uiw/icons'; 2 3<Adobe style={{ fill: 'red' }} /> 4<Alipay height="36" />
1import logo from './logo.svg'; 2 3<img src={logo} />
1import { ReactComponent as ComLogo } from './logo.svg'; 2 3<ComLogo />
1yarn add babel-plugin-named-asset-import 2yarn add @svgr/webpack
1// webpack.config.js 2[ 3 require.resolve('babel-plugin-named-asset-import'), 4 { 5 loaderMap: { 6 svg: { 7 ReactComponent: '@svgr/webpack?-svgo,+ref![path]', 8 }, 9 }, 10 }, 11],
1import { ReactComponent as ComLogo } from './logo.svg'; 2 3<ComLogo />
A unique component named after the font name is generated.
Props are TextProps and are used as inline style.
In addition, the iconName prop is mandatory and refers to svg names written in camelCase
1SvgToFont.jsx 2// ↓↓↓↓↓↓↓↓↓↓ 3 4import { SvgToFont } from './SvgToFont'; 5 6<SvgToFont fontSize={32} color="#fefefe" iconName={"git"} />
1SvgToFont.d.ts 2// ↓↓↓↓↓↓↓↓↓↓ 3 4import { TextStyle } from 'react-native'; 5 6export type SvgToFontIconNames = 'git'| 'adobe'| 'demo' | 'left' | 'styleInline' 7 8export interface SvgToFontProps extends Omit<TextStyle, 'fontFamily' | 'fontStyle' | 'fontWeight'> { 9 iconName: SvgToFontIconNames 10} 11 12export declare const SvgToFont: (props: SvgToFontProps) => JSX.Element;
As always, thanks to our amazing contributors!
Made with contributors.
Licensed under the MIT License.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
11 commit(s) and 6 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
Reason
packaging workflow detected
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
Found 4/26 approved changesets -- score normalized to 1
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2024-12-02
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More