SVG Font Previewer

Preview

nkokhelox

|
3,664 installs
| (1) | Free
Show the SVG font details, icons, icon name and icon unicode as hexadecimal value. It can also preview any valid SVG file.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

SVG Font Previewer

Build Status

SVG Font Previewer is built for viewing SVG files, especially SVG font files.

Requirements

  • This depends on xmldom npm library
  • It currently makes use of vscode webview interface.
  • SVG file should meet this criteria for it to work with this extension, resourceLangId == svg or resourceLangId == xml and fileExtension == .svg

Extension Settings

This extension contributes the following settings:

  • svg-font-previewer.iconSortOrder: enum[asc, desc]
    • asc: (default) ascending sort order (small comes first e.g. 0 > 9 > A > Z > a > z)
    • desc: descending sort order (larger comes first e.g. z > a > Z > A > 9 > 0)
  • svg-font-previewer.iconSortBy: enum[unicode, name, none]
    • none: (default) do not sort at all
    • unicode: the icon unicode
    • name: the icon name
  • svg-font-previewer.autoOpenPreview: boolean
    • true: (default) also open the SVG preview when opening the SVG file.
      • This was done so that people can preview SVG automatically just by installing this extension. Then they'll learn to turn it off them selves if they want to
    • false: don't automatically open the SVG preview when opening the SVG file.

Features

This extension supports viewing SVG Fonts and SVG images

  • For SVG font it will show the font name, em size scale, font icons.
  • For other SVGs it will just show preview of the SVG as an image.
  • I wish i can say it previews any SVG file. 😉

Invoke from the command palette

  • Imgur

Invoke from editor actions (Where you usually find preview buttons)

  • Imgur

Changes with the themes

  • Imgur

Known Issues

  • The command is available for any XML document, still investigating if there's a way to make this extension only work for SVG's without loosing the native VSCode XML support.

  • If there's a wide icon from the font file, then that icon will flow over icons on the right.

    • [Workaround] If this hides some icons then, resizing the preview window may help.
    • Imgur

Release Notes

  • Quickly preview the font details and how the actual SVG font icons look like.
  • Sort the icons preview by icon names or by icon unicode in ascending or descending order.

Updates

Credits