Add icons for various browsers#3645
Conversation
Add icons for Chrome, Edge, Firefox and Safari
🦋 Changeset detectedLatest commit: eb6e538 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for astro-starlight ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
trueberryless
left a comment
There was a problem hiding this comment.
Thanks for the quick contribution!
I looked at all SVG paths and noticed that they all look a bit... weird. You can see what I mean for each individual path in the comments on each path.
May I ask where you got the SVGs from? What is your source?
| chrome: | ||
| '<path d="M8.5,10c-1.1,2-.5,4.5,1.5,5.6,2,1.1,4.5.5,5.6-1.5,1.1-2,.5-4.5-1.5-5.6-2-1.1-4.5-.5-5.6,1.5Z"/><path d="M8.8,17.5c-1-.6-1.8-1.4-2.3-2.3h0S1.4,6.4,1.4,6.4C-1.6,12.1.4,19.2,6,22.4c1.3.7,2.6,1.2,4,1.4l3.2-5.6c-1.4.3-3,0-4.4-.7Z"/><path d="M6.5,8.8c1.2-2,3.3-3.2,5.5-3.2h0s10.2,0,10.2,0c-1-1.6-2.4-3-4.2-4C12.9-1.4,6.4,0,2.8,4.3l3.2,5.6c.1-.4.3-.7.5-1.1Z"/><path d="M23.3,7.9h-6.4c1.7,2,2.1,4.9.7,7.3l-5.1,8.8c4-.1,7.8-2.3,10-6,1.9-3.2,2.1-6.9.9-10.1Z"/>', | ||
| edge: | ||
| '<path d="M5.3,2C7.2.7,9.6,0,11.9,0,19.8,0,24,5.8,24,10.3c0,1.5-.6,3-1.7,4.1s-2.5,1.7-4.1,1.7c-3.5,0-4.3-1.1-4.3-1.5s.1-.3.3-.5c0,0,0,0,0,0,.4-.5.7-1.2.7-1.9h0c0-3.5-3.7-6.4-8.3-6.4-2.1,0-4.1.6-5.8,1.9.8-2.2,2.4-4.2,4.3-5.5ZM6.8,7.2C3,7.2,0,9.4,0,12.1H0c0,2.9,1.1,5.7,2.9,7.9,1.9,2.2,4.5,3.6,7.4,4-1.2-.8-2.2-1.9-2.9-3.2-.7-1.3-1.1-2.7-1.1-4.2,0-3,2-6.3,4.3-7.3h0c.4-.2.9-.3,1.3-.3h0c-1.5-1.2-3.4-1.9-5.3-1.9ZM22,18.7h0c0,0,0,0,0-.1,0,0,0-.2.1-.2,0,0,0-.1,0-.2,0,0,0-.1-.1-.2-.2-.2-.4-.1-.5,0,0,0,0,0,0,0-1.3.6-2.8,1-4.2,1-3.8,0-7.6-2.5-8.2-6.2-.7,1.1-1.2,2.4-1.2,3.8,0,3.7,2.8,7,6.1,7s4.5-1.2,6.4-2.8c.6-.6,1.2-1.3,1.7-2Z"/>', |
| edge: | ||
| '<path d="M5.3,2C7.2.7,9.6,0,11.9,0,19.8,0,24,5.8,24,10.3c0,1.5-.6,3-1.7,4.1s-2.5,1.7-4.1,1.7c-3.5,0-4.3-1.1-4.3-1.5s.1-.3.3-.5c0,0,0,0,0,0,.4-.5.7-1.2.7-1.9h0c0-3.5-3.7-6.4-8.3-6.4-2.1,0-4.1.6-5.8,1.9.8-2.2,2.4-4.2,4.3-5.5ZM6.8,7.2C3,7.2,0,9.4,0,12.1H0c0,2.9,1.1,5.7,2.9,7.9,1.9,2.2,4.5,3.6,7.4,4-1.2-.8-2.2-1.9-2.9-3.2-.7-1.3-1.1-2.7-1.1-4.2,0-3,2-6.3,4.3-7.3h0c.4-.2.9-.3,1.3-.3h0c-1.5-1.2-3.4-1.9-5.3-1.9ZM22,18.7h0c0,0,0,0,0-.1,0,0,0-.2.1-.2,0,0,0-.1,0-.2,0,0,0-.1-.1-.2-.2-.2-.4-.1-.5,0,0,0,0,0,0,0-1.3.6-2.8,1-4.2,1-3.8,0-7.6-2.5-8.2-6.2-.7,1.1-1.2,2.4-1.2,3.8,0,3.7,2.8,7,6.1,7s4.5-1.2,6.4-2.8c.6-.6,1.2-1.3,1.7-2Z"/>', | ||
| firefox: | ||
| '<path d="M24,8.7l-.3,1.8s-.4-3.4-.9-4.7c-.7-2-1.1-1.9-1.1-1.9.5,1.3.4,2,.4,2,0,0-.9-2.5-3.2-3.3-2.6-.9-4-.6-4.2-.6h0s0,0,0,0c0,0,0,0,0,0,0,0,2.9.5,3.4,1.2,0,0-1.2,0-2.4.4,0,0,4.4.6,5.4,5.2,0,0-.5-1.1-1.1-1.2.4,1.3.3,3.6,0,4.8,0,.2,0-.7-.9-1,.2,1.8,0,4.6-1.2,5.4,0,0,.8-2.8.2-1.7-3.3,5.3-7.3,2.4-9.1,1.2.9.2,2.6,0,3.4-.6,0,0,0,0,0,0,.8-.6,1.3-1,1.8-.9.4.1.7-.4.4-.8-.3-.4-1.2-1-2.3-.7-.8.2-1.8,1.1-3.3.2-1.2-.7-1.3-1.3-1.3-1.7,0-.1,0-.3.1-.4.1-.4.5-.5.8-.6.4,0,.7.2,1.1.4,0-.1,0-.3,0-.5,0,0,0-.3,0-.5,0-.2,0-.5-.2-.7t0,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.1.3-.3.6-.6.3-.2.6-.4.9-.6.2-.2.4-.3.5-.3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,.1-.1.3-.3.4-.7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0h0s0,0,0-.1c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0h0c0-.1-.2-.1-.8-.1h0c-.3,0-.6,0-1,0-.8,0-1.2-.8-1.3-1.1.2-1.1.7-1.8,1.6-2.4,0,0,0,0,0,0,.2-.1-2.1,0-3.2,1.4-.9-.2-1.7-.2-2.5,0-.1,0-.3,0-.5,0-.5-.4-1.1-1.2-1.2-2.2,0,0,0,0,0,0,0,0,0,0,0,0,0,0-1.4,1.1-1.2,4.2,0,0,0,0,0,.1-.4.5-.6,1-.6,1.1-.3.7-.7,1.8-1,3.4,0,0,.2-.6.6-1.4-.3.9-.5,2.4-.4,4.5,0,0,0-.5.2-1.2,0,1.3.5,3,1.6,4.9,2.1,3.7,5.3,5.6,8.8,5.9.6,0,1.3,0,1.9,0,0,0,.1,0,.2,0,.7,0,1.5-.2,2.2-.3,10-2.5,8.9-14.9,8.9-14.9h0Z"/>', |
| substack: | ||
| '<path d="M22.5 8.2h-21V5.4h21v2.8zm-21 2.6V24L12 18.1 22.5 24V10.8h-21zM22.5 0h-21v2.8h21V0z"/>', | ||
| chrome: | ||
| '<path d="M8.5,10c-1.1,2-.5,4.5,1.5,5.6,2,1.1,4.5.5,5.6-1.5,1.1-2,.5-4.5-1.5-5.6-2-1.1-4.5-.5-5.6,1.5Z"/><path d="M8.8,17.5c-1-.6-1.8-1.4-2.3-2.3h0S1.4,6.4,1.4,6.4C-1.6,12.1.4,19.2,6,22.4c1.3.7,2.6,1.2,4,1.4l3.2-5.6c-1.4.3-3,0-4.4-.7Z"/><path d="M6.5,8.8c1.2-2,3.3-3.2,5.5-3.2h0s10.2,0,10.2,0c-1-1.6-2.4-3-4.2-4C12.9-1.4,6.4,0,2.8,4.3l3.2,5.6c.1-.4.3-.7.5-1.1Z"/><path d="M23.3,7.9h-6.4c1.7,2,2.1,4.9.7,7.3l-5.1,8.8c4-.1,7.8-2.3,10-6,1.9-3.2,2.1-6.9.9-10.1Z"/>', |
| firefox: | ||
| '<path d="M24,8.7l-.3,1.8s-.4-3.4-.9-4.7c-.7-2-1.1-1.9-1.1-1.9.5,1.3.4,2,.4,2,0,0-.9-2.5-3.2-3.3-2.6-.9-4-.6-4.2-.6h0s0,0,0,0c0,0,0,0,0,0,0,0,2.9.5,3.4,1.2,0,0-1.2,0-2.4.4,0,0,4.4.6,5.4,5.2,0,0-.5-1.1-1.1-1.2.4,1.3.3,3.6,0,4.8,0,.2,0-.7-.9-1,.2,1.8,0,4.6-1.2,5.4,0,0,.8-2.8.2-1.7-3.3,5.3-7.3,2.4-9.1,1.2.9.2,2.6,0,3.4-.6,0,0,0,0,0,0,.8-.6,1.3-1,1.8-.9.4.1.7-.4.4-.8-.3-.4-1.2-1-2.3-.7-.8.2-1.8,1.1-3.3.2-1.2-.7-1.3-1.3-1.3-1.7,0-.1,0-.3.1-.4.1-.4.5-.5.8-.6.4,0,.7.2,1.1.4,0-.1,0-.3,0-.5,0,0,0-.3,0-.5,0-.2,0-.5-.2-.7t0,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.1.3-.3.6-.6.3-.2.6-.4.9-.6.2-.2.4-.3.5-.3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,.1-.1.3-.3.4-.7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0h0s0,0,0-.1c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0h0c0-.1-.2-.1-.8-.1h0c-.3,0-.6,0-1,0-.8,0-1.2-.8-1.3-1.1.2-1.1.7-1.8,1.6-2.4,0,0,0,0,0,0,.2-.1-2.1,0-3.2,1.4-.9-.2-1.7-.2-2.5,0-.1,0-.3,0-.5,0-.5-.4-1.1-1.2-1.2-2.2,0,0,0,0,0,0,0,0,0,0,0,0,0,0-1.4,1.1-1.2,4.2,0,0,0,0,0,.1-.4.5-.6,1-.6,1.1-.3.7-.7,1.8-1,3.4,0,0,.2-.6.6-1.4-.3.9-.5,2.4-.4,4.5,0,0,0-.5.2-1.2,0,1.3.5,3,1.6,4.9,2.1,3.7,5.3,5.6,8.8,5.9.6,0,1.3,0,1.9,0,0,0,.1,0,.2,0,.7,0,1.5-.2,2.2-.3,10-2.5,8.9-14.9,8.9-14.9h0Z"/>', | ||
| safari: | ||
| '<path d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12,12-5.4,12-12S18.6,0,12,0ZM12,2c5.5,0,10,4.5,10,10s-4.5,10-10,10S2,17.5,2,12,6.5,2,12,2ZM12.5,3v2c0,0,.1,0,.1,0h.2s.3-2,.3-2h-.2s-.4,0-.4,0ZM10.8,3.1h-.5c0,0,.3,2,.3,2h.5c0,0-.3-2-.3-2ZM14.8,3.4l-.7,1.9.5.2.7-1.9-.5-.2ZM8.7,3.6h-.2c0,0,0,0,0,0h0l-.3.2.8,1.8h.2c0-.1,0-.2,0-.2h0s-.7-1.9-.7-1.9ZM16.8,4.4l-1,1.7h.2c0,0,0,.1,0,.1h.1c0,0,1.2-1.5,1.2-1.5l-.2-.2h0c0,0-.2-.2-.2-.2ZM6.7,4.8l-.4.3h0c0,0,0,0,0,0l.9,1,.4.6h0s0,0,0,0l.3-.2-1.2-1.6ZM18.3,5.6l-7.3,5.3-5.2,7.3,1-.7-.9,1,.4.3,1.3-1.5-.3-.2,5.8-4.1,4-5.8.3.3,1.5-1.3-.3-.4-1.2,1,.9-1.3ZM5,6.3l-.3.4,1.6,1.2.3-.4-1.6-1.2ZM19.8,7.6l-1.4.9-.3.2h0s0,0,0,0v.3c.1,0,1.9-.9,1.9-.9l-.2-.4h0s0-.2,0-.2ZM3.9,8.2l-.2.2h0c0,0,0,0,0,0v.2c0,0,1.8.7,1.8.7v-.2c0,0,.2-.2.2-.2l-1.8-.8ZM20.7,9.8l-1.9.5v.3c0,0,.1,0,.1,0l2-.3h0v-.6ZM3.2,10.4v.5c0,0,1.9.3,1.9.3v-.5c0,0-1.9-.3-1.9-.3ZM19.8,12h-.8c0,0,0,0,0,0v.4s2,.1,2,.1v-.5s-1,0-1,0h-.2ZM5,12.5h-2v.4h0c0,0,0,.2,0,.2l2-.3h0v-.4ZM18.8,13.8v.4c-.1,0,1.8.7,1.8.7h0v-.6c.1,0-1.8-.5-1.8-.5ZM5.3,14.1l-1.9.7.2.5,1.9-.7-.2-.5ZM18.2,15.3l-.2.4,1.7,1.1.3-.4-1.7-1ZM6.1,15.8l-1.7,1v.2c0,0,.2,0,.2,0l.2.2,1.6-1.2h-.1c0-.1,0-.2,0-.2h0s0-.1,0-.1ZM17.1,16.8l-.2.2h0c0,.1,1.3,1.6,1.3,1.6l.2-.2h0c0,0,.2-.2.2-.2l-1.5-1.4ZM15.8,17.9l-.4.2,1,1.7.4-.3-1-1.7ZM8.6,18.1l-.3.6-.7,1.2h0s0,0,0,0l.4.2.9-1.8-.3-.2h0s0,0,0,0ZM14.1,18.7h-.4c0,.1.5,2.1.5,2.1h.4c0-.1,0-.1,0-.1h0c0,0-.7-1.9-.7-1.9ZM10.3,18.8l-.5,1.9h.3c0,0,.1,0,.1,0h0s.3-1.9.3-1.9h-.1s-.2,0-.2,0ZM12.5,19h-.5s0,2,0,2h.5s0-2,0-2Z"/>', |
delucis
left a comment
There was a problem hiding this comment.
Thanks for the careful review @trueberryless — I agree, there seem to be some issues with the SVGs here.
I had a quick look on https://icones.js.org/ (my go-to for quickly browsing different icon sets) and found a few that might work better. In particular the Material Design Icons set includes monochrome icons for these four browsers that look like they’d work.
Could you take a look @mschoeffmann?
|
Checking in to see if you’re still interested in this PR @mschoeffmann! |
|
Thanks for the thorough check @trueberryless. I apologise for overlooking the larger scale. I was using Illustrator to simplify the paths and optimize them for 24x24 pixel use as suggested by the SVG metadata. I’ve redone all four icons to look good at high resolution. I checked cones.js.com as suggested by @delucis for working ones with a public domain license and converted them to the correct 24x24 format. Incidentally, I’ve slightly reduced the detail of the Safari logo while ensuring it remains detailed enough for larger scales. New PR incoming - let me know if you need any further adjustments. Here are screenshots from Illustrator:
|
|
These look much better. Thanks for taking the time to analyse best usages for profound results. I agree that the Safari monochrome logo is hardly recognisable, but I wonder if the modified version fits the theme of the other rather darker icons. It probably lies in the nature of the Safari logo to be inferior due to its many small details, making it cluttered at a large scale. Personally, I quite like your simplified asset if it wasn't for the low black-to-white ratio compared to the other three. Generally, sticking to given, existing icons would probably avoid confusion and embrace consistency. Nonetheless, I'm looking forward to your new PR. But let's maybe also wait if Chris has any other suggestions or ideas. |
|
By the way, I’ve noticed Illustrator has a rounding issue when saving files as SVG. This caused all the quirks and artefacts. Regarding the Safari icon, I agree with you. Meanwhile, I’ve updated the PR with the new icons. |
There was a problem hiding this comment.
Thanks for taking care of that @mschoeffmann! I left a couple more notes.
|
@delucis Thanks - I implemented your changes.
|
delucis
left a comment
There was a problem hiding this comment.
Fantastic — thank you @mschoeffmann! We’ll get these published in our next release.
* main: i18n(ja): update components/icons.mdx (withastro#3689) i18n(ja): update components/badges.mdx (withastro#3688) i18n(ja): update manual-setup.mdx (withastro#3687) [ci] release (withastro#3686) [ci] format Add icons for various browsers (withastro#3645) Add Actionbase to showcase (withastro#3685) i18n(de): Fix typos in getting-started.mdx (withastro#3681)
This PR contains the following updates: | Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) | |---|---|---|---| | [@astrojs/starlight](https://starlight.astro.build) ([source](https://github.com/withastro/starlight/tree/HEAD/packages/starlight)) | [`0.37.4` → `0.37.6`](https://renovatebot.com/diffs/npm/@astrojs%2fstarlight/0.37.4/0.37.6) |  |  | --- ### Release Notes <details> <summary>withastro/starlight (@​astrojs/starlight)</summary> ### [`v0.37.6`](https://github.com/withastro/starlight/blob/HEAD/packages/starlight/CHANGELOG.md#0376) [Compare Source](https://github.com/withastro/starlight/compare/@astrojs/starlight@0.37.5...@astrojs/starlight@0.37.6) ##### Patch Changes - [#​3645](withastro/starlight#3645) [`a562096`](withastro/starlight@a562096) Thanks [@​mschoeffmann](https://github.com/mschoeffmann)! - Adds icons for Chrome, Edge, Firefox, and Safari ### [`v0.37.5`](https://github.com/withastro/starlight/blob/HEAD/packages/starlight/CHANGELOG.md#0375) [Compare Source](https://github.com/withastro/starlight/compare/@astrojs/starlight@0.37.4...@astrojs/starlight@0.37.5) ##### Patch Changes - [#​3675](withastro/starlight#3675) [`0ba556d`](withastro/starlight@0ba556d) Thanks [@​controversial](https://github.com/controversial)! - Excludes the accessible labels for heading anchor links from Pagefind results </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi45Mi4xMiIsInVwZGF0ZWRJblZlciI6IjQyLjkyLjEyIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119--> Co-authored-by: Renovate Bot <renovate@zarantonello.dev> Co-committed-by: Renovate Bot <renovate@zarantonello.dev>















Add icons for Chrome, Edge, Firefox and Safari
Description