devicon icon indicating copy to clipboard operation
devicon copied to clipboard

new icon: remix (original, original-wordmark, line, line-wordmark)

Open AnshSinghSonkhia opened this issue 1 year ago • 13 comments

Double check these details before you open a PR

  • [x] PR does not match another non-stale PR currently opened
  • [x] PR name matches the format new icon: Icon name (versions separated by comma). More details here
  • [x] PR's base is the develop branch.
  • [x] Your icons are inside a folder as seen here
  • [x] SVG matches the standards laid out here
  • [x] A new object is added in the devicon.json file as seen here

This PR closes #2127

Link to prove your SVG is correct and up-to-date.

  • https://remix.run/
  • https://drive.google.com/drive/u/0/folders/1pbHnJqg8Y1ATs0Oi8gARH7wccJGv4I2c

credits

Thanks to @weh

AnshSinghSonkhia avatar Feb 17 '24 04:02 AnshSinghSonkhia

I made some changes @weh. Kindly, guide me on any additional changes that you may need.

AnshSinghSonkhia avatar Feb 21 '24 18:02 AnshSinghSonkhia

Nice, almost there. 👍 Now we gotta make sure to update the SVGs as they don't meet the standards layed out in the wiki.

Here's a tutorial on how to update the SVGs, and optimize them.

Thanks for sharing the tutorial @canaleal !! I have updated the SVGs according to the standards!

AnshSinghSonkhia avatar Feb 28 '24 17:02 AnshSinghSonkhia

Excellent work 👍 Almost there.

Don't forget to that all the SVGs need to have 1 path only and must be optimized.

You can follow the tutorial I provided before on how to unify the paths and optimize the SVGs. The section is called Unify the Paths and create Plain Icons (Inkscape). You don't need to create plain icons, but make sure that the original svgs and the line svgs only have 1 path, 1 fill color, and the paths are not grouped.

Dont forget to optimize all the SVGs too using SVGOMG. You can also find this step in the tutorial.

I successfully Unified the Paths according to the tutorial But, Optimizing the SVG using SVGOMG is ruining the viewbox.

Is it necessary to optimizing the SVG for removing inkscape's attributes?

AnshSinghSonkhia avatar Feb 29 '24 15:02 AnshSinghSonkhia

Hey @AnshSinghSonkhia, yes. the SVGs have to be optimized.

Also, taking a look at the SVGs, there is more than 1 path for all SVGs,.

Original: 2 Paths and its still grouped. image

Original-wordmark: image

It's the same for the line SVGs.

If possible, could you post the SVG code after the optimizing it in SVGOMG.

canaleal avatar Feb 29 '24 15:02 canaleal

Optimizing the SVG using SVGOMG

Optimizing is a 1 Click task with SVGVIEWER

I found it more easier to do with it.

  1. Visit https://www.svgviewer.dev
  2. Upload SVG or paste code

beforeSVG

  1. Click on Prettify Button.
  2. Click on Optimize Button.

BOOM !!! The SVG is optimized, without ruining the viewbox.

optimizedSVG

AnshSinghSonkhia avatar Feb 29 '24 16:02 AnshSinghSonkhia

SVG Viewer is an awesome alternative, a previous contributor even recommended it, but notice how the SVGs still have the height, width and even stroke attributes after optimizing them in svg viewer.

<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"><path style="stroke-width:.270613;fill:#121212;fill-opacity:1" d="M8.389 0v26.09h55.445c14.656 0 21.986 6.29 21.986 16.67 0 11.804-7.33 16.263-21.986 16.263H8.389v26.663h53.818c11.603 0 17.912 3.255 18.93 17.91.77 10.01.674 14.965.582 19.718-.03 1.53-.06 3.038-.06 4.686h34.218c0-7.567 0-14.5-1.15-29.29-1.425-14.857-9.161-22.386-22.393-25.032 15.674-2.036 27.277-14.248 27.277-32.973C119.611 15.671 103.122 0 69.941 0zm0 108.125V128h43.535v-12.72c0-2.674-1.312-7.155-7.356-7.155z"/></svg>

And this is how it looks when I copied the original svg code from above into SVGOMG. The viewbox is still 0 0 128 128.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#121212" d="M8.389 0v26.09h55.445c14.656 0 21.986 6.29 21.986 16.67 0 11.804-7.33 16.263-21.986 16.263H8.389v26.663h53.818c11.603 0 17.912 3.255 18.93 17.91.77 10.01.674 14.965.582 19.718-.03 1.53-.06 3.038-.06 4.686h34.218c0-7.567 0-14.5-1.15-29.29-1.425-14.857-9.161-22.386-22.393-25.032 15.674-2.036 27.277-14.248 27.277-32.973C119.611 15.671 103.122 0 69.941 0zm0 108.125V128h43.535v-12.72c0-2.674-1.312-7.155-7.356-7.155z"/></svg>

canaleal avatar Mar 02 '24 05:03 canaleal

SVG Viewer is an awesome alternative, a previous contributor even recommended it, but notice how the SVGs still have the height, width and even stroke attributes after optimizing them in svg viewer.

<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"><path style="stroke-width:.270613;fill:#121212;fill-opacity:1" d="M8.389 0v26.09h55.445c14.656 0 21.986 6.29 21.986 16.67 0 11.804-7.33 16.263-21.986 16.263H8.389v26.663h53.818c11.603 0 17.912 3.255 18.93 17.91.77 10.01.674 14.965.582 19.718-.03 1.53-.06 3.038-.06 4.686h34.218c0-7.567 0-14.5-1.15-29.29-1.425-14.857-9.161-22.386-22.393-25.032 15.674-2.036 27.277-14.248 27.277-32.973C119.611 15.671 103.122 0 69.941 0zm0 108.125V128h43.535v-12.72c0-2.674-1.312-7.155-7.356-7.155z"/></svg>

And this is how it looks when I copied the original svg code from above into SVGOMG. The viewbox is still 0 0 128 128.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#121212" d="M8.389 0v26.09h55.445c14.656 0 21.986 6.29 21.986 16.67 0 11.804-7.33 16.263-21.986 16.263H8.389v26.663h53.818c11.603 0 17.912 3.255 18.93 17.91.77 10.01.674 14.965.582 19.718-.03 1.53-.06 3.038-.06 4.686h34.218c0-7.567 0-14.5-1.15-29.29-1.425-14.857-9.161-22.386-22.393-25.032 15.674-2.036 27.277-14.248 27.277-32.973C119.611 15.671 103.122 0 69.941 0zm0 108.125V128h43.535v-12.72c0-2.674-1.312-7.155-7.356-7.155z"/></svg>

Okay @canaleal, so what do you want me to do now, for the best results?

AnshSinghSonkhia avatar Mar 02 '24 07:03 AnshSinghSonkhia

With SVGOMG

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128"><path fill="#121212" d="M8.389 0v26.09h55.445c14.656 0 21.986 6.29 21.986 16.67 0 11.804-7.33 16.263-21.986 16.263H8.389v26.663h53.818c11.603 0 17.912 3.255 18.93 17.91.77 10.01.674 14.965.582 19.718-.03 1.53-.06 3.038-.06 4.686h34.218c0-7.567 0-14.5-1.15-29.29-1.425-14.857-9.161-22.386-22.393-25.032 15.674-2.036 27.277-14.248 27.277-32.973C119.611 15.671 103.122 0 69.941 0zm0 108.125V128h43.535v-12.72c0-2.674-1.312-7.155-7.356-7.155z"/></svg>

Screenshot 2024-03-02 201942

I have not committed these changes, @canaleal

It is showing 150px height & width, Will it work?

AnshSinghSonkhia avatar Mar 02 '24 14:03 AnshSinghSonkhia

Yes, I just check the SVG code you provided in the comment above and it looks good on inkscape and icomoon.

image

image

canaleal avatar Mar 02 '24 18:03 canaleal

Hey @canaleal & @weh, The required changes are DONE. It's good to go, hopefully!!

I Got to learn a lot with this PR. Let me know if we need any more changes.

AnshSinghSonkhia avatar Mar 04 '24 14:03 AnshSinghSonkhia

Hi!

I'm the check-bot and we have some issues with your PR:

devicon.json is not sorted correctly.
Please make sure that your icon is added in the `devicon.json` file at the correct alphabetic position
as seen here: https://github.com/devicons/devicon/wiki/Updating-%60devicon.json%60


Check our CONTRIBUTING guide for more details regarding these errors.

Please address these issues. When you update this PR, I will check your SVGs again.

Thanks for your help, SVG-Checker Bot :smile:

github-actions[bot] avatar Mar 05 '24 05:03 github-actions[bot]

Still, this pr has one pending review @canaleal

AnshSinghSonkhia avatar Mar 08 '24 05:03 AnshSinghSonkhia

Yup, thats pretty much the process. At least 2 reviewers are need to ensure that the changes are correct.

canaleal avatar Mar 08 '24 06:03 canaleal

Hi!

I'm the check-bot and we have some issues with your PR:

devicon.json is not sorted correctly.
Please make sure that your icon is added in the `devicon.json` file at the correct alphabetic position
as seen here: https://github.com/devicons/devicon/wiki/Updating-%60devicon.json%60


Check our CONTRIBUTING guide for more details regarding these errors.

Please address these issues. When you update this PR, I will check your SVGs again.

Thanks for your help, SVG-Checker Bot :smile:

github-actions[bot] avatar May 25 '24 03:05 github-actions[bot]