Contributing : error when using gulp command

[meetdilip]

In 18.04 I installed npm, nodejs and gulp. But when I try the gulp part of the command, I get this error

$ gulp --iconset Action --dest Action
internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'gulp-util'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/usr/lib/nodejs/gulp/bin/gulp.js:4:13)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

I even tried

sudo apt install gulp-util without success. What to do ? I am working a Material Icon set.

[Xaviju]

did you npm install?

[meetdilip]

@Xaviju Yes, tried the first option in this guide

https://linuxize.com/post/how-to-install-node-js-on-ubuntu-18.04/

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

sudo apt install nodejs

Then tried sudo apt install gulp

I also ran npm install without going into any folder. I hope that will run in the Home folder.

Thanks.

[Xaviju]

:thinking: If you can get the node --version and the npm --version then its wroking correctly. You shouldn't have to install gulp since it should be self installed on this repo.

You should go to the repo root folder and execute npm install and should install all the required dependencies.

Anyway, if you are crating a new iconset, this might be deprecated since there is a GUI tool that works amazing and is easier to use: https://icomoon.io/

[meetdilip]

thinking If you can get the node --version and the npm --version then its wroking correctly. You shouldn't have to install gulp since it should be self installed on this repo.

I got both ( version ).

I didn't download this repo and zip and extracted it. It was not mentioned anywhere. Not blaming you, I am a beginner.

You should go to the repo root folder and execute npm install and should install all the required dependencies.

I see

Anyway, if you are crating a new iconset, this might be deprecated since there is a GUI tool that works amazing and is easier to use: https://icomoon.io/

I want to use Material Two Tone icons as Symbols inside Inkscape like it is available in this repo. Can I do that with https://icomoon.io/ ?

Thanks.

[meetdilip]

Tried in the repo root folder. Still had to install gulp and the same old error

/inkscape-open-symbols-master/Action 2T$ gulp --iconset Action-2T --dest Action-2T internal/modules/cjs/loader.js:638 throw err; ^

Error: Cannot find module 'gulp-util' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at Function.Module._load (internal/modules/cjs/loader.js:562:25) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object. (/usr/lib/nodejs/gulp/bin/gulp.js:4:13) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3)

[Xaviju]

I want to use Material Two Tone icons as Symbols inside Inkscape like it is available in this repo. Can I do that with https://icomoon.io/ ?

Yes, you just drop the files into the GUI and then you can export them as SVG sprite. This SVG can be loaded into inkscape.

Tried in the repo root folder. Still had to install gulp and the same old error

I'll check it. Is probably deprectaded

[meetdilip]

then you can export them as SVG sprite

Can you please screenshot that option ?

[Xaviju]

[meetdilip]

Thanks. I figured out. Was trying on it. The icon is not editable though. The GUI method video you posted allows editing of icons. Please see

Is there any fix ?

[Xaviju]

Yeah, that's because it has some inline SVG code that doesn't allow editing.

1. Open the SVG file with a code editor.
2. Remove all the fill and stroke attributes.

Try again.

[meetdilip]

I used find and replace and replaced with " nothing ". Now there is no fill at all. By default, there is no " stroke " in the Action category. Now all those Two-tone icons are missing from the symbol file. Attaching screenshot

What to do ? Replace fill with something else ? I am not sure how to proceed. Thanks.

[Xaviju]

Can you please paste the code?

[meetdilip]

Attaching the SVG. I open it with Gedit for the code

Action 2T.svg.zip

[Xaviju]

I see in the code that you still have some fill attributes. Like this one in the line 27

<path fill="#000" opacity="0.3" style="fill: var(--color1, #000)" d="M8.387 8l6.947-3.653 6.947 3.653z"></path>

[Xaviju]

I fixed your icon set. What did I do?

1. Removed all fillattributes
2. Removed all style attributes except one in the svg tag.
3. Removed aria-hidden attribute in the svg tag
4. Added metadata at the top of the file to give some credits, context and title.

Please review, edit the metadata and test Action 2T.zip

[meetdilip]

• Removed all fillattributes

• Removed all style attributes except one in the svg tag.

• Removed aria-hidden attribute in the svg tag

• Added metadata at the top of the file to give some credits, context and title.

May I know how it helps ?

Please review, edit the metadata and test Action 2T.zip

I tried within the document. I still couldn't ungroup it. But I could change the colour, rotate it and resize it.

[meetdilip]

I placed it inside the symbols folder, but it is not under Current Document menu. Unable to call it through Inkscape. All other icons sets are visible.

[Xaviju]

You Should not be able to ungroup the icons since they are just symbols, not a path. If you want to edit the icons you should select the icon and Edit - Clone - Unlink clone

[Xaviju]

Removed all fill attributes

Sets the color of the SVG, removing it allows the user to choose the color. Same for stroke

Removed all style attributes except one in the svg tag.

Sets a default attributes and does not allows users to change it. The one at the top sets the view in the preview under the symbols menu in inkscape

Removed aria-hidden attribute in the svg tag

This is an accesibility feature for the web, does not make sense here

Added metadata at the top of the file to give some credits, context and title.

This sets the title, creator, and basic data about the icons. Will be used by Inkscape to display some info, like the iconset title.

[Xaviju]

but it is not under Current Document menu

Its only i that menu when an icon has been used in the current document. This would be like the symbolset of the current document.

[meetdilip]

I mean, I can see all icon sets, even my own version of Actions. I can pick and drop icons from it. But not able to call/access the one you attached. It is not seen under that menu with symbol sets. I hope I am not confusing you.

PS : I placed it under symbols folder.

[Xaviju]

Oh, really? I did it really fast... No problema, if it already works for you its enough. Would you create the icons and PR so those icons are available for everyone?

Thanks!!

[meetdilip]

I can do that. Do you know what are the license terms from Google ? Are we allowed to modify and re-distribute ?

[Xaviju]

On its repo it says Apache License 2.0 https://github.com/google/material-design-icons/blob/master/LICENSE

[meetdilip]

What does that mean about the symbols ? They don't allow them as a pack yet.

[meetdilip]

These 5 styles are not a part of that repo.

[Xaviju]

Oh, I thought it was Material icons. Where are they from?

[meetdilip]

I thought it was Material icons.

It is. They simply have 4 more styles. Only 1 is available in that repo. Which you have already made available. I am not sure why they don't offer them as a part of any repo. We can use these icons as in fa fa-head in HTML documents.

[meetdilip]

Where are they from?

They allow downloading one by one. I had to spend hours downloading a single set. Now more to go. Only if we are clear about the license.

[Xaviju]

So if are Material Icons and you are just offering flavors they are part of the same license. This license allows redistribution as long as it keeps the same license (and it is set in the readme).

So I think we are fine. :+1:

[meetdilip]

I see. Ok. I will try to get the full pack. It will take hours, but I can try. :)

[Xaviju]

That's awesome!