scriptex / svg-symbol-sprite Goto Github PK
View Code? Open in Web Editor NEWA script to generate a symbol sprite from SVG files
Home Page: https://atanas.info/portfolio/open-source/svg-symbol-sprite
License: MIT License
A script to generate a symbol sprite from SVG files
Home Page: https://atanas.info/portfolio/open-source/svg-symbol-sprite
License: MIT License
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:
Found in HEAD commit: 64341b905e979ff003cab37ffaed0ea3724f17b5
Found in base branch: master
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
Base Score Metrics:
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
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.
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.
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:
Found in HEAD commit: 64341b905e979ff003cab37ffaed0ea3724f17b5
Found in base branch: master
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
Base Score Metrics:
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
Svgo.config.js must be placed in the config directory regardless of whether -c config is configured
let svgoConfig = await loadConfig(DEFAULT_CONFIG);
As a continuation of the previous discussion
This issue provides visibility into Renovate updates and their statuses. Learn more
This repository currently has no open or pending branches.
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:
Found in HEAD commit: 0f96e2825a6d3508dc7110a1336bcd0ad03ec66d
Found in base branch: master
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
Base Score Metrics:
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
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:
Found in HEAD commit: 2539d9f36d7fcba1c5352c643226afea296ed9eb
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
Base Score Metrics:
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.