scriptex / svg-symbol-sprite Goto Github PK

View Code? Open in Web Editor NEW

16.0 3.0 2.0 1.01 MB

A script to generate a symbol sprite from SVG files

Home Page: https://atanas.info/portfolio/open-source/svg-symbol-sprite

License: MIT License

JavaScript 3.22% TypeScript 96.78%

svg-sprites svg-icons spritesheet sprite-generator

svg-symbol-sprite's Introduction

SVG Symbol Sprite

Create an SVG symbol sprite from your SVG files.

Code stats

A Node.js CLI tool which creates an optimized SVG symbol sprite out of a folder full of SVG files.

Provides handy defaults so you don't have to waste time.

All available options can be tweaked. You can even supply your own SVGO config.

This tool is heavily inspried by sprite.sh

Installation

npm i svg-symbol-sprite -g

# or

yarn global add svg-symbol-sprite

Options

Argument	Description	Default value
`-i`, `--input`	Specifies input dir	"." (current directory)
`-o`, `--output`	Specifies output file	"./sprite.svg"
`-v`, `--viewbox`	Specifies viewBox attribute	(parsed from each icon)
`-p`, `--prefix`	Specifies prefix for id attribute	"icon-"
`-c`, `--config`	Absolute path to the SVGO config file or "false"	-
`-a`, `--attrs`	Attributes for the SVG element	"aria-hidden="true""
`-s`, `--style`	Inline style for the SVG element	"width: 0; height: 0; position: absolute;"

Usage: svg-symbol-sprite [options]

Options:
    -i, --input     Specifies input dir (current dir by default)
    -o, --output    Specifies output file ("./sprite.svg" by default)
    -v, --viewbox   Specifies viewBox attribute (parsed by default)
    -p, --prefix    Specifies prefix for id attribute ("icon-" by default)
    -c, --config    Absolute path to the SVGO config file or "false"
    -a, --attrs     Attributes for the SVG element ('xmlns="http://www.w3.org/2000/svg" aria-hidden="true"' by default)
    -s, --style     Inline style for the SVG element ("width: 0; height: 0; position: absolute;" by default)

Usage as a package.json script

The tool can be also used as a package.json script. You need to add it to the devDependencies of your project's package.json.

{
	"scripts": {
		"svg-sprite": "svg-symbol-sprite -i ./assets/svgs -o ./dist/sprite.svg"
	}
}

npm run svg-sprite

# or

yarn svg-sprite

Usage without installation (with `npx`)

The tool can be also used without installing it:

npx svg-symbol-sprite -i ./assets/svgs -o ./dist/sprite.svg

SVG Optimization

svg-symbol-sprite optimizes the input SVG files using SVGO and an opinionated configuration file. In order to customize the SVGO config, one can do so by using the -c or --config option and an absolute path to the SVGO config file.

If you wish to completely disable the SVGO files optimization, pass "false" to the --config option.

Accessibility

svg-symbol-sprite does not help with SVG icons' accessibility. This is your responsibility as a developer - you should make sure that your SVGs contain relevant title and id attributes.

LICENSE

MIT

Connect with me:

Support and sponsor my work:

svg-symbol-sprite's People

Contributors

Stargazers

Watchers

Forkers

yuseinkerdakov unsalbiler

svg-symbol-sprite's Issues

CVE-2021-44906 (Medium) detected in minimist-1.2.5.tgz

CVE-2021-44906 - Medium Severity Vulnerability

Vulnerable Library - minimist-1.2.5.tgz

parse argument options

Library home page: https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/minimist/package.json

Dependency Hierarchy:

release-it-14.13.0.tgz (Root Library)
- update-notifier-5.1.0.tgz
  - latest-version-5.1.0.tgz
    - package-json-6.5.0.tgz
      - registry-url-5.1.0.tgz
        
        rc-1.2.8.tgz
        
        ❌ minimist-1.2.5.tgz (Vulnerable Library)

Found in HEAD commit: 64341b905e979ff003cab37ffaed0ea3724f17b5

Found in base branch: master

Vulnerability Details

Minimist <=1.2.5 is vulnerable to Prototype Pollution via file index.js, function setKey() (lines 69-95).

Publish Date: 2022-03-17

URL: CVE-2021-44906

CVSS 3 Score Details (5.5)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Local
- Attack Complexity: Low
- Privileges Required: None
- User Interaction: Required
- Scope: Unchanged
Impact Metrics:
- Confidentiality Impact: None
- Integrity Impact: None
- Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://nvd.nist.gov/vuln/detail/CVE-2021-44906

Release Date: 2022-03-17

Fix Resolution: BumperLane.Public.Service.Contracts - 0.23.35.214-prerelease;cloudscribe.templates - 5.2.0;Virteom.Tenant.Mobile.Bluetooth - 0.21.29.159-prerelease;ShowingVault.DotNet.Sdk - 0.13.41.190-prerelease;Envisia.DotNet.Templates - 3.0.1;Yarnpkg.Yarn - 0.26.1;Virteom.Tenant.Mobile.Framework.UWP - 0.20.41.103-prerelease;Virteom.Tenant.Mobile.Framework.iOS - 0.20.41.103-prerelease;BumperLane.Public.Api.V2.ClientModule - 0.23.35.214-prerelease;VueJS.NetCore - 1.1.1;Dianoga - 4.0.0,3.0.0-RC02;Virteom.Tenant.Mobile.Bluetooth.iOS - 0.20.41.103-prerelease;Virteom.Public.Utilities - 0.23.37.212-prerelease;Indianadavy.VueJsWebAPITemplate.CSharp - 1.0.1;NorDroN.AngularTemplate - 0.1.6;Virteom.Tenant.Mobile.Framework - 0.21.29.159-prerelease;Virteom.Tenant.Mobile.Bluetooth.Android - 0.20.41.103-prerelease;z4a-dotnet-scaffold - 1.0.0.2;Raml.Parser - 1.0.7;CoreVueWebTest - 3.0.101;dotnetng.template - 1.0.0.4;SitecoreMaster.TrueDynamicPlaceholders - 1.0.3;Virteom.Tenant.Mobile.Framework.Android - 0.20.41.103-prerelease;Fable.Template.Elmish.React - 0.1.6;BlazorPolyfill.Build - 6.0.100.2;Fable.Snowpack.Template - 2.1.0;BumperLane.Public.Api.Client - 0.23.35.214-prerelease;Yarn.MSBuild - 0.22.0,0.24.6;Blazor.TailwindCSS.BUnit - 1.0.2;Bridge.AWS - 0.3.30.36;tslint - 5.6.0;SAFE.Template - 3.0.1;GR.PageRender.Razor - 1.8.0;MIDIator.WebClient - 1.0.105

Step up your Open Source Security Game with WhiteSource here

CVE-2021-44907 (Medium) detected in qs-6.10.2.tgz

CVE-2021-44907 - Medium Severity Vulnerability

Vulnerable Library - qs-6.10.2.tgz

A querystring parser that supports nesting and arrays, with a depth limit

Library home page: https://registry.npmjs.org/qs/-/qs-6.10.2.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/qs/package.json

Dependency Hierarchy:

release-it-14.13.0.tgz (Root Library)
- git-url-parse-11.6.0.tgz
  - git-up-4.0.5.tgz
    - parse-url-6.0.0.tgz
      - parse-path-4.0.3.tgz
        
        ❌ qs-6.10.2.tgz (Vulnerable Library)

Found in HEAD commit: 64341b905e979ff003cab37ffaed0ea3724f17b5

Found in base branch: master

Vulnerability Details

A Denial of Service vulnerability exists in qs up to 6.8.0 due to insufficient sanitization of property in the gs.parse function. The merge() function allows the assignment of properties on an array in the query. For any property being assigned, a value in the array is converted to an object containing these properties. Essentially, this means that the property whose expected type is Array always has to be checked with Array.isArray() by the user. This may not be obvious to the user and can cause unexpected behavior.

Publish Date: 2022-03-17

URL: CVE-2021-44907

CVSS 3 Score Details (5.5)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Local
- Attack Complexity: Low
- Privileges Required: None
- User Interaction: Required
- Scope: Unchanged
Impact Metrics:
- Confidentiality Impact: None
- Integrity Impact: None
- Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://nvd.nist.gov/vuln/detail/CVE-2021-44907

Release Date: 2022-03-17

Fix Resolution: GR.PageRender.Razor - 1.8.0;MIDIator.WebClient - 1.0.105;cloudscribe.templates - 5.2.0;KnstAsyncApiUI - 1.0.2-pre;Romano.Vue - 1.0.1;Yarnpkg.Yarn - 0.26.1;VueJS.NetCore - 1.1.1;NativeScript.Sidekick.Standalone.Shell - 1.9.1-v2018050205;Indianadavy.VueJsWebAPITemplate.CSharp - 1.0.1;NorDroN.AngularTemplate - 0.1.6;dotnetng.template - 1.0.0.2;Fable.Template.Elmish.React - 0.1.6;Fable.Snowpack.Template - 2.1.0;Yarn.MSBuild - 0.22.0,0.24.6

Step up your Open Source Security Game with WhiteSource here

A big thank you and some suggestions (DEFAULT_CONFIG, SVG_PROPS and SVG_STYLE)

Good Morning Mr Atanasov,

First of all, thank you for taking the trouble to follow up on the work of Hugo/Kitty Giraudel and for writing this excellent plugin. I first wanted to take the svg-sprite plugin (suggested by Google itself in one of its Material icons pages for developers), but the problem with this plugin is that it is too heavy, it makes coffee! With this plugin we spend our time configuring the options we want to deactivate. And above all it is difficult to determine the final path of the sprite, in the end you have to copy/paste with node to get what you want.

Your plugin does what we ask of it: an SVG sprite!

In short, I come to you, here are some suggestions from me that you will find, I hope, benevolent:

First of all, a detail: on the npm page the link to the atanas.info page is broken (https://atanas.info/projects/svg-symbol-sprite.html -> https://atanas.info/portfolio/open-source/svg-symbol-sprite). It's a minor detail but almost made me miss your excellent plugin.
If you have configured your environment for ES6 modules, you get an error indicating a path problem for the SVGO configuration file. I had trouble understanding where the error came from and I solved it by directly installing the SVGO module for my icons: being configured in "type": "module" I had to change my file to *.cjs . Incidentally, I think that the optimization of the icons must be done upstream and is to be left to the responsibility of the developer, it would be necessary to be able to deactivate this option.
We should also be able to customize the SVG_PROPS and SVG_STYLE variables.
3.1. At the time of HTM5 now well installed, the declaration of a namespace for the SVG is implicit and therefore useless.
3.2. the same for styles, unless the sprite is injected inline, I don't see the point. And on the other hand there are several schools on accessibility: some developers might prefer the sr-only method for example.

There you go, I hope you won't take offense at these few remarks from an amateur practicing as a dilettante.

Best regards.

CVE-2021-33587 (High) detected in css-what-4.0.0.tgz

CVE-2021-33587 - High Severity Vulnerability

Vulnerable Library - css-what-4.0.0.tgz

a CSS selector parser

Library home page: https://registry.npmjs.org/css-what/-/css-what-4.0.0.tgz

Path to dependency file: svg-symbol-sprite/package.json

Path to vulnerable library: svg-symbol-sprite/node_modules/css-what/package.json

Dependency Hierarchy:

svgo-viewbox-2.0.4.tgz (Root Library)
- svgo-2.3.0.tgz
  - css-select-3.1.2.tgz
    - ❌ css-what-4.0.0.tgz (Vulnerable Library)

Found in HEAD commit: 2539d9f36d7fcba1c5352c643226afea296ed9eb

Vulnerability Details

The css-what package 4.0.0 through 5.0.0 for Node.js does not ensure that attribute parsing has Linear Time Complexity relative to the size of the input.

Publish Date: 2021-05-28

URL: CVE-2021-33587

CVSS 3 Score Details (7.5)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Network
- Attack Complexity: Low
- Privileges Required: None
- User Interaction: None
- Scope: Unchanged
Impact Metrics:
- Confidentiality Impact: None
- Integrity Impact: None
- Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-33587

Release Date: 2021-05-28

Fix Resolution: css-what - 5.0.1

Step up your Open Source Security Game with WhiteSource here

Remove empty `style` attribute

As a continuation of the previous discussion

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

This repository currently has no open or pending branches.

Check this box to trigger a request for Renovate to run again on this repository

CVE-2021-35065 (High) detected in glob-parent-5.1.2.tgz

CVE-2021-35065 - High Severity Vulnerability

Vulnerable Library - glob-parent-5.1.2.tgz

Extract the non-magic parent path from a glob string.

Library home page: https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/glob-parent/package.json

Dependency Hierarchy:

release-it-14.11.8.tgz (Root Library)
- globby-11.0.4.tgz
  - fast-glob-3.2.7.tgz
    - ❌ glob-parent-5.1.2.tgz (Vulnerable Library)

Found in HEAD commit: 0f96e2825a6d3508dc7110a1336bcd0ad03ec66d

Found in base branch: master

Vulnerability Details

The package glob-parent before 6.0.1 are vulnerable to Regular Expression Denial of Service (ReDoS)

Publish Date: 2021-06-22

URL: CVE-2021-35065

CVSS 3 Score Details (7.5)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Network
- Attack Complexity: Low
- Privileges Required: None
- User Interaction: None
- Scope: Unchanged
Impact Metrics:
- Confidentiality Impact: None
- Integrity Impact: None
- Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: gulpjs/glob-parent#49

Release Date: 2021-06-22

Fix Resolution: glob-parent - 6.0.1

Step up your Open Source Security Game with WhiteSource here

DEFAULT_CONFIG is required

Svgo.config.js must be placed in the config directory regardless of whether -c config is configured

let svgoConfig = await loadConfig(DEFAULT_CONFIG);

SVGO - Are plugins actually working?

Hello, I am wondering if I'm doing something incorrect

I'm using the cli with this command:

$ svg-symbol-sprite  -i ./src/components/Icon/icons-library -o ./public/svg-symbols.svg --config svgo.config.js

where config is a custom file I have created in the root of the project (same level as package.json)

this is my config file:

const myPlugin = {
  name: 'makeEverythingPink',
  description: 'Change all fill attribute values to pink.',
  fn: () => {
    return {
      element: {
        enter: (node, parentNode) => {
          if (node.attributes.fill === null) {
            return;
          }

          node.attributes.fill = 'pink';
        }
      }
    };
  }
};

module.exports = {
  plugins: [
    'cleanupAttrs',
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeUselessDefs',
    'removeEditorsNSData',
    'removeEmptyAttrs',
    'removeEmptyText',
    'removeEmptyContainers',
    'cleanupEnableBackground',
    'convertStyleToAttrs',
    'removeUselessStrokeAndFill',
    'removeDimensions',
    'cleanupIds',
    {
      name: 'removeViewBox',
      enabled: false
    },
    {
      name: 'prefixIds',
      params: {
        prefix: {
          toString() {
            this.counter = this.counter || 0;

            return `svgo-viewbox-id-${this.counter++}`;
          }
        }
      }
    },
    myPlugin
  ]
};

myPlugin is an example located in svgo website, but it seems is not really working at all, I keep getting the same fill value as is declared in the original <svg /> file.

I have checked the console log for both enter: and exit: of the function, it seems to actually change the fill: 'pink' like this, but the generated svg symbols still have the original fill.

Am I doing something wrong? I am not completely sure if this is an svgo issue or a svg-symbol-sprite issue though.

scriptex / svg-symbol-sprite Goto Github PK

svg-symbol-sprite's Introduction

SVG Symbol Sprite

Code stats

Installation

Options

Usage as a package.json script

Usage without installation (with npx)

SVG Optimization

Accessibility

LICENSE

svg-symbol-sprite's People

Contributors

Stargazers

Watchers

Forkers

svg-symbol-sprite's Issues

CVE-2021-44906 - Medium Severity Vulnerability

CVE-2021-44907 - Medium Severity Vulnerability

CVE-2021-33587 - High Severity Vulnerability

CVE-2021-35065 - High Severity Vulnerability

Recommend Projects

Recommend Topics

Recommend Org

Usage without installation (with `npx`)