Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add dbt icon #5492

Merged
merged 10 commits into from Jun 17, 2021
Merged

Add dbt icon #5492

merged 10 commits into from Jun 17, 2021

Conversation

dsmdavid
Copy link
Contributor

@dsmdavid dsmdavid commented Apr 20, 2021 •
edited by adamrusted

image

Issue: #5470
Alexa rank: 84,798

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

Remove letters from the icon https://github.com/fishtown-analytics/dbt-styleguide/tree/master/_includes/icons and use the hex code present in the styleguide

@github-actions github-actions bot added the new icon Issues or pull requests for adding a new icon label Apr 20, 2021
@dsmdavid
Copy link
Contributor Author

dsmdavid commented Apr 20, 2021 •
edited

Giving up for today, @PeterShaggyNoble
Keep getting linting errors like this:
image
but this is how the icon is set up
image

Maybe after some coffee it makes sense

adamrusted
adamrusted requested changes Apr 20, 2021
View reviewed changes
Copy link
Member

@adamrusted adamrusted left a comment •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the contribution @dsmdavid, and welcome to Simple Icons!

I'm seeing some differences around the right-hand side of the image, and inner of the bottom left section (source in orange, PR in black underneath). This is compared using the orange version in that SVG (first of two <svg> tags if you open it in VS Code), given the white version didn't want to load for me.

It'd also be worth linking to the specific blob of the SVG used (for example https://github.com/fishtown-analytics/dbt-styleguide/blob/a2895e005457eda531880dfde62f31959d42f18b/_includes/icons/logo.svg) as the source - and I don't think in this situation the guidelines entry is necessary - as there are no official usage guidelines at that URL.

Edit

I didn't even see the linter was failing! Ping me when you look at this again, and I'll try and help out if I can!

@adamrusted adamrusted linked an issue Apr 20, 2021 that may be closed by this pull request
dbt icon (Data Build Tool) #5470
Closed
@adamrusted adamrusted changed the title Add dbt icon - issue 5470 Add dbt icon Apr 20, 2021
@adamrusted
Copy link
Member

@dsmdavid - I think I can see what your issue is - it appears your current SVG has 2 decimals of precision. We try to aim for 3 decimals, but can go to 4 or 5 if the icon needs it (lots of detail!). Could you look at regenerating from source (so you've got it without optimizations) and optimizing to 4 decimals? That should fix your issue.

@dsmdavid
use dbt with 4 dec
0493fb5 
Use 4 decimals in illustrator, optimise with 3 according to guidelines
@dsmdavid
Copy link
Contributor Author

@adamrusted Thanks for your help. I'm afraid I don't know what I'm doing wrong.
Things I've tried:

  1. Use the full logo (10 months ago) https://github.com/fishtown-analytics/dbt-styleguide/blob/master/_includes/icons/dbt-logo-full.svg , get the icon and follow the steps in the contribution guidelines.
    The linting fails with an error about having segments that are collinear.
  2. Use the .ai file (from 3 years ago) https://github.com/fishtown-analytics/dbt-styleguide/blob/master/_includes/icons/logo.ai
    The linting fails with an error about not being centered, plus what you mentioned above about the small differences.

What I'm doing:

  1. Opening the file in illustrator.

  2. Getting the icon.

  3. Scale to 24 px by 24 px

  4. Export as svg 4 decimals
    image

  5. optimise in the https://jakearchibald.github.io/svgomg/ tool

  6. adding the annotations

  7. testing locally (bundle exec jekyll serve)

  8. commit

  9. Fail the tests

@adamrusted
Copy link
Member

Oh wow, okay. I didn't realise quite how bad the newer version was with collinear points.
I've had a go at this myself, and gotten a path to 3 decimals by selecting points in a straight line (or simplifying circles) and using Object -> Path -> Simplify. You're more than welcome to use the path if you're not able to replicate it - but we will need another @simple-icons/maintainers to review it if that's the case.

dbt

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>dbt icon</title><path d="M22.693.451c-.844-.586-2-.577-2.894-.106-1.833 1.01-4.023 2.206-5.85 3.226-1.246.751-2.876.78-4.131.036C8.04 2.642 5.925 1.484 4.145.524A2.595 2.595 0 0 0 2.369.143a2.845 2.845 0 0 0-2.326 2.23A2.575 2.575 0 0 0 .36 4.154c.787 1.434 1.943 3.556 2.69 4.912.291.563.771 1.297.926 1.911a3.98 3.98 0 0 1-.403 3.141l-3.121 5.8c-.728 1.201-.378 2.871.836 3.61.846.57 1.994.625 2.894.15l6.07-3.33c-1.801-1.286-2.924-3.28-3.869-5.231.381.714 1.203 1.473 2.271 2.234a37.633 37.633 0 0 0 4.05 2.429c2.328 1.268 5.429 2.636 7.352 3.831.53.313 1.159.413 1.76.277 1.137-.277 1.992-1.317 2.156-2.46a2.692 2.692 0 0 0-.359-1.779c-1.745-3.139-3.973-7.224-5.716-10.364-.745-1.269-1.779-2.39-3.067-3.117 2.03.917 4.142 1.99 5.466 3.851 1.012-1.851 2.215-4.061 3.227-5.911.407-.662.498-1.5.247-2.234A2.996 2.996 0 0 0 22.693.451zM3.973 21.143a1.059 1.059 0 0 1-1.109 1.129 1.119 1.119 0 0 1-.02-2.238 1.058 1.058 0 0 1 1.129 1.109zM1.76 2.901a1.059 1.059 0 0 1 1.11-1.128 1.058 1.058 0 0 1 1.131 1.11 1.058 1.058 0 0 1-1.108 1.128 1.06 1.06 0 0 1-1.133-1.11zm20.47 18.208A1.12 1.12 0 1 1 21.099 20a1.06 1.06 0 0 1 1.131 1.109zm-7.571-9.511c-.329-.54-.874-.751-1.526-.744a2.235 2.235 0 0 0-1.5 3.822A2.664 2.664 0 0 1 9.322 11.7c.185-1.434 1.608-2.56 3.037-2.359 1.197.203 2.18 1.061 2.296 2.257h.004zm7.651-8.791a1.12 1.12 0 0 1-2.238.02 1.12 1.12 0 0 1 2.238-.02z"/></svg>

@dsmdavid
Copy link
Contributor Author

Thanks, @adamrusted
I'm using the svg you provided, as I don't quite understand what I'm doing wrong 😅
On another note -- do you mind sharing/pointing me in the right direction how do you generate those cards? https://user-images.githubusercontent.com/1830867/115577479-5fd0c180-a2bc-11eb-971a-079fbce78ef5.png
Thank you very much!

@adamrusted
Copy link
Member

Hey @dsmdavid - no worries, I'll just need another @simple-icons/maintainers to review it.
The website for those previews is in the comments of any new PR - and is just a link to https://petershaggynoble.github.io/SI-Sandbox/preview/.

@PeterShaggyNoble
Copy link
Member

@adamrusted, which file did you base your version on?

@adamrusted
Copy link
Member

adamrusted commented Apr 28, 2021 •
edited

Not at my PC. I think it was the SVG tagged above.

Update: I'm almost certain I used the 'messy' SVG and tidied it up in Illustrator.

@PeterShaggyNoble
Copy link
Member

Got the best results when comparing to this version but I am seeing a few small differences, most significantly this one in the top right circle and this one in the bottom left curve. There are also a couple of hairline thin diffences around some of the other edges.

@adamrusted
Copy link
Member

Hey @dsmdavid - did you still want to work on this one? I can try and push changes and get this resolved if you prefer?

@dsmdavid
Copy link
Contributor Author

dsmdavid commented Jun 1, 2021

Hey @dsmdavid - did you still want to work on this one? I can try and push changes and get this resolved if you prefer?

Thanks, @adamrusted I'd appreciate it if you could do it as I have tried to correct the issues raised by peter with not much success. Kind regards, David

@adamrusted
Copy link
Member

@PeterShaggyNoble - how does the below path compare for you?

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>dbt</title><path d="M22.6963.4502c-.8441-.5861-2.0004-.5771-2.8946-.1057-1.8329 1.0105-4.023 2.2065-5.8507 3.2261-1.2459.7507-2.8765.7804-4.1319.0357-1.7777-.965-3.8934-2.1228-5.6735-3.0832C2.587-.5238.3651.5727.0436 2.3719a2.5716 2.5716 0 0 0 .3172 1.7816c.9983 1.8255 2.2303 4.0722 3.1875 5.8236.757 1.2484.787 2.8885.0257 4.1419-.9775 1.8174-2.1436 3.9838-3.1218 5.8007-.5222.9041-.5283 2.0964.1214 2.9389.7974 1.1069 2.4104 1.4669 3.609.8215 1.9001-1.0436 4.17-2.2861 6.0707-3.3304-1.8014-1.2859-2.9248-3.2799-3.869-5.2321.3815.7144 1.203 1.473 2.2717 2.2346a37.6523 37.6523 0 0 0 4.0505 2.4289c2.3287 1.2679 5.4298 2.6358 7.3523 3.8319 1.0358.6421 2.4329.3109 3.1875-.6115.8068-.8979 1.0203-2.3069.37-3.3504-1.3853-2.4921-3.4469-6.2539-4.8277-8.761-.9273-1.8099-2.1082-3.7391-3.9562-4.722 2.0299.9171 4.1423 1.9901 5.4664 3.8519 1.0125-1.8512 2.2151-4.0609 3.2275-5.9121.7692-1.2011.328-2.8745-.83-3.6577zM3.9741 21.1441c.0488.6274-.4811 1.1656-1.1087 1.1287-.6178.0055-1.1232-.4909-1.1287-1.1087-.0055-.6178.4909-1.1232 1.1087-1.1287.6274-.0488 1.1656.4811 1.1287 1.1087zM1.761 2.9005c-.0479-.6276.4822-1.1654 1.1101-1.1287.6287-.0497 1.1686.4812 1.1316 1.1102.0477.6271-.4813 1.1645-1.1087 1.1287-.6289.0496-1.1691-.4809-1.133-1.1102zm20.4724 18.2094c.0063.6186-.4901 1.1252-1.1087 1.1315-.6186.0063-1.1252-.4901-1.1315-1.1087-.0063-.6186.4901-1.1252 1.1087-1.1315.6281-.049 1.1675.48 1.1315 1.1087zm-7.5723-9.5112c-.3286-.5401-.8744-.7515-1.5259-.7444-1.2335.0395-2.2014 1.0714-2.162 2.3048a2.2343 2.2343 0 0 0 .6618 1.517c-1.4748-.1839-2.5156-1.5463-2.306-3.0175.2086-1.4159 1.6159-2.516 3.0318-2.3174 1.2037.2007 2.1747 1.0701 2.3003 2.2575zm7.6523-8.7925c-.0159.6184-.5301 1.1069-1.1485 1.091a1.12 1.12 0 0 1-1.0903-1.071c.0159-.6184.5301-1.1069 1.1485-1.091a1.12 1.12 0 0 1 1.0903 1.071z"/></svg>

@PeterShaggyNoble
Copy link
Member

Sorry, @adamrusted, still seeing a good few differences (example below) 🙈 The most recent SVGs in their repo still produce the best results for comparison. Would you mind having another look? Given the mess of all their own versions and the fact that there are significant differences between all of them, though, I'd be OK with running with as close as we can get to any of them, in the interests of getting this one off our plate.

@adamrusted
Copy link
Member

adamrusted commented Jun 12, 2021 •
edited

Just updated using the brand-logo path from the top of the updated source file. Looks to be a pretty clean version of the icon - and seems to match great on my end when exported at 4 decimals. Would another @simple-icons/maintainers be able to review this?

ericcornelissen
ericcornelissen approved these changes Jun 12, 2021
View reviewed changes
Copy link
Contributor

@ericcornelissen ericcornelissen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SVG looks spot on when compared to the current source - and it looks better than the previous source as well - nice job @adamrusted!

I'll leave this for @PeterShaggyNoble to merge, provided they agree with the new source.

@PeterShaggyNoble
Copy link
Member

New source looks good to me, so will merge this in based on Eric's approval of the SVG above. Thanks for your work on this one, @dsmdavid & @adamrusted 👍🏻 It did not look like a fun one!

@PeterShaggyNoble PeterShaggyNoble merged commit fca0189 into simple-icons:develop Jun 17, 2021
@github-actions github-actions bot mentioned this pull request Jun 20, 2021
Merged
ericcornelissen added a commit that referenced this pull request Jun 20, 2021
@ericcornelissen
Release 12 new icons and 4 updated icons (v5.3.0)
2f86279 
# New Icons

- Binance (#5906)
- ByteDance (#5909)
- Cloud Foundry (#5841)
- dbt (#5492)
- Foursquare City Guide (#5989)
- Icons8 (#5924)
- Polywork (#5806)
- Portainer (#5868)
- Pytest (#5871)
- Railway (#5818)
- Wallabag (#5864)
- Zig (#5572)

# Updated Icons

- Battle.net (#5986)
- Beatport (#5985)
- Foursquare (#5989)
- Grubhub (#5168)

---

:warning: The old `Foursquare` SVG can now be found as `Foursquare City Guide`, see #5989 for more info.
dirien pushed a commit to dirien/simple-icons that referenced this pull request Jul 20, 2021
@dsmdavid
Add dbt icon (simple-icons#5492)
bd09b3d
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adamrusted adamrusted adamrusted requested changes

@ericcornelissen ericcornelissen ericcornelissen approved these changes

@PeterShaggyNoble PeterShaggyNoble Awaiting requested review from PeterShaggyNoble

Assignees
No one assigned
Labels
new icon Issues or pull requests for adding a new icon
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

dbt icon (Data Build Tool)
4 participants
@dsmdavid @adamrusted @PeterShaggyNoble @ericcornelissen