Adds Quasar

[Berkmann18]

Issue: fix #3143

Checklist

• I updated the JSON data in _data/simple-icons.json
• I optimized the icon with SVGO or SVGOMG
• The SVG viewbox is 0 0 24 24

Description

Source URL: https://github.com/quasarframework/quasar-art/blob/cbbbb4b0b7ec7181dfc2d1b29a1ce025e71575bc/src/quasar-logo.svg

[ericcornelissen]

Hi @Berkmann18, thank you for taking the time to contribute. Please have a look at section 4 and 5 of the Contributing Guidelines to find out how to improve the SVG you added to fix the build errors. Also, from the screenshot below you can see that the SVG does not fit into the 24x24 viewbox.

If you have any questions, feel free to ask here 🙂

[Berkmann18]

I believe I fixed the issues and set it so it complies with the standards.

[PeterShaggyNoble]

Thanks for the update, @Berkmann18. However, per our contributing guidlines, the SVG should be a single line of code and consist of one, single path.

[Berkmann18]

@PeterShaggyNoble TIL it was possible while still having the shapes not touching each other.
I've done that now.

[PeterShaggyNoble]

Thanks, @Berkmann18 Before we can review the icon, though, can you optimise it by running it through SVGO or SVGOMG, please?

There are also a couple of other things that will need to be updated before we can merge this in:

1. The markup of the SVG should be just a single line, with no newlines or tabs.
2. For files sourced from Github, the source URL in the JSON should be the link to the file used - see the "Source Guidelines" section of our contributing guidelines for more information.
3. From their website, my initial expectation would be that the brand colour should be a grey - they use #263238 in their logos - but I could also see a case being made for the #1976d2 blue used both in their logo and on their website.

[Berkmann18]

1/2. Done.

3. So what do you recommend? Should I change the hex in the JSON file to #263238 or use one of the blue shades (#42a5f5/#1976d2)?

[PeterShaggyNoble]

Thanks for the updates, @Berkmann18.

Your path, however, is coming in at 23.942 wide, rather than 24. And, when comparing it with the first icon in the source file, I'm seeing quite a few differences - which version did you base your SVG off?

You also managed to delete the title tag from the SVG, which is why the build is failing this time 🙊

For the colour, I'm going to stick with my first instinct and say the grey but let's get some feedback from the other @simple-icons/maintainers before you update it.

[Berkmann18]

Your path, however, is coming in at 23.942 wide, rather than 24. And, when comparing it with the first icon in the source file, I'm seeing quite a few differences - which version to you base your SVG off?

That's most likely because the original I based myself off has more elements and the icon itself is weirdly aligned. I had to hack it a few times to get the icon to be at the right place and size (without the extra fluff).

You also managed to delete the title tag from the SVG, which is why the build is failing this time

It seems that it's due to SVGOMG removing that (not the first time it happens, it seems).

For the colour, I'm going to stick with my first instinct and say the grey but let's get some feedback from the other [...]

Sure.

[PeterShaggyNoble]

Thanks, @Berkmann18. In order to ensure we're comparing like with like, could you let us know which version of the logo in the source file you based yours off?

It seems that it's due to SVGOMG removing that

You can disable that setting in the sidebar; it's the fifth option from the bottom.

[Berkmann18]

@PeterShaggyNoble The one you see when you use the source URL: quasarframework/quasar-art@9127036.
It's not based off some old version.

You can disable that setting in the sidebar; it's the fifth option from the bottom.

Oh, I see, thank you.

[ericcornelissen]

Just chiming in here with two comments:

• I would say blue is the brand colour more so than grey, look e.g. at their Medium page. Based on that page I would go with the darker blue.
• Didn't check if the SVG looks good, but it does need to be centered vertically into the viewbox (but I recommend you don't update that until we checked the SVG @Berkmann18).

[Berkmann18]

I would say blue is the brand colour more so than grey, look e.g. at their Medium page. Based on that page I would go with the darker blue.

According to the colour picker extension I use, it seems to be a different shade (#0273d4) which isn't used in the logo colours or as the solid colour on https://quasar.dev/start/pick-quasar-flavour (where #1976d2 is used as the main blue shade, as shown by the menu bar).

Didn't check if the SVG looks good, but it does need to be centered vertically into the viewbox

Good point, you're right, it's vertically off judging by how it shows up on Inkscape.

[ericcornelissen]

I would say blue is the brand colour more so than grey, look e.g. at their Medium page. Based on that page I would go with the darker blue.

I would stick with the blue (#1976D2) found in the SVG file you linked (outside the viewbox).

The Medium link was just to indicate that blue does in fact seem to be the brand color, and the site you linked seems to also support that. Agreed @PeterShaggyNoble?

The one you see when you use the source URL

That is very interesting! For starters, that version (at least the two from that SVG I tried) is actually taller than it is wide (whereas your SVG is wider than it is tall). Therefore it is quite difficult to make a meaningful comparison. Anyway, here is the original overlayed in red on top of yours (done in Illustrator).

In this zip file you can find a not-optimized version of the logo with the outer circle removed (in case you had trouble removing it from the logo) which I used for the above comparison. You can use it as a jumping of point for updating the Pull Request if you want 😄

Also, could you also point out which logo in the SVG you linked exactly you used? (as it contains 16 of them, 13 inside the viewbox an 3 outside.)

[PeterShaggyNoble]

Agreed @PeterShaggyNoble?

Yup, based on the new evidence presented, I'm happy to go with that choice of colour, too.

[Berkmann18]

That is very interesting! For starters, that version (at least the two from that SVG I tried) is actually taller than it is wide

Yeah, I thought I was scaling it wrong but that explains it.

Also, could you also point out which logo in the SVG you linked exactly you used?

I used the top icon (the big one which is the official logo).

[Berkmann18]

That is very interesting! For starters, that version (at least the two from that SVG I tried) is actually taller than it is wide (whereas your SVG is wider than it is tall). Therefore it is quite difficult to make a meaningful comparison. Anyway, here is the original overlayed in red on top of yours (done in Illustrator).

Wow, I didn't notice it wasn't in a square dimension.

Also, could you also point out which logo in the SVG you linked exactly you used? (as it contains 16 of them, 13 inside the viewbox an 3 outside.)

I used the top one in the source URL (I.e. the big one with the official icon).

[PeterShaggyNoble]

Thanks for your efforts on this one, @Berkmann18 - everything looks spot on now 👍