Add an svg icon file for GitHub actions about flawfinder HOT 56 OPEN

@yongyan-gh and @eddynaka : I thought it'd be cleaner to make "create svg icon for GitHub actions" a separate issue. Any pointers to guidelines & "good examples" would be appreciated.

from flawfinder.

Cute idea from @jeffersonking ! If we did that, we need some (googly) eyes on the mass below, else it's not obvious they are antenna.

from flawfinder.

None of the holes look like eyes. I suspect the big white ones, with dark circles in the center (looking out), would make them clearly eyes.

from flawfinder.

@jeffersonking : Ah, I see! Good! I still think the smile could be just a little bigger, so that it's clear. But it is adorable :-).

from flawfinder.

Bigger smile, cleaning up the line style of the F's.

from flawfinder.

Are there any particular guidelines for creating an svg icon for this purpose? I didn't find any, and I imagine there are guidelines (or at least a set of examples).

from flawfinder.

Hi @david-a-wheeler, below the link where you can find all icons the starter-workflow repository already has:
https://github.com/actions/starter-workflows/tree/main/icons

from flawfinder.

My art skills are non-existent, I won't be able to compete with those icons. But if the point is just "some icon that helps you find it" we can use simple text.

I created a quick SVG file here, let me know if this would work as an SVG icon (at least as a starting point):

https://dwheeler.com/flawfinder/flawfinder.svg

For completeness, I'm uploading this image here:

from flawfinder.

@michaelcfanning asked:

Sounds like fun to create an icon for you. I can propose something. Tell me a little about the 'brand' or feeling you want to create in the community for your tool. :) It's C++, obviously, we find quality issues, there's a security focus. What else? :) Do you want a serious feel? Something more playful? etc.

from flawfinder.

The general pitch for flawfinder is "simple & just works". It works even when fancy tools don't. So an icon that expresses simplicity / straightforwardness might be nice. I started with just the two letters "ff" (curved & connected so they're visually interesting).

I don't know about serious vs. playful.

Here's one idea: "ff" with an eyeball, a magnifying glass, or binoculars looking to its right (it's "searching" for flaws).

from flawfinder.

Great, this is helpful, I'll pass it along to our designer and see if he's interested in picking up the work, could be a fun side-project.

from flawfinder.

from flawfinder.

Riffing on your idea, what if one of the F's was inspecting the other one? :) Just a random idea I sketched out above. I sent mail to an actual designer to see what he thinks, maybe we'll get some other thoughts.

from flawfinder.

@michaelcfanning - that is already awesome! I like the look of the second one better, the one with the lowercase letter as the second letter. I like lowercase letters :-). Using an uppercase letter as the first letter gives lots of room for a magnifying glass.

from flawfinder.

from flawfinder.

haha. the lower-case f came home from school with a note from administrators that some use-after-free vulnerabilities were reported by other children's families.

from flawfinder.

The bug on the "f" is cute, but the bug is too small to be seen when it's scaled down. Maybe the second "f' could look like a bug?

from flawfinder.

Great idea! Maybe we have a logo with more detail for the larger version, and then do something like you suggest for the smaller. I note that 'fly', 'flea' and 'firefly', are all bugs that start with the letter f. I note that 'firefly' has two f's in it, like flaw finder, and a firefly could simply be a cool spirit animal for your tool (as an illumination-creating thing). Fantastic and fancy feasible forms are flying fast and furious now.

from flawfinder.

I'd prefer one logo that can scale to different sizes & look reasonable, instead of trying to have multiple logos.

I agree, fun feasible forms!

from flawfinder.

from flawfinder.

So conceptually, something like this seems like an easy solution that we can make scale. Less ambitious than turning the lower-case f into an actual bug that reads as a letter f as well (though I like this idea a lot). In any case, I heard from our designer and pointed him to this discussion, we'll see what turns up.

from flawfinder.

That is a GLORIOUS idea.

I'm concerned that this specific image won't be comprehensible when scaled down to tiny sizes. Think 16x16 or 32x32, the usual .ico sizes. You might consider using stick-antenna with bulbs at the top. Or just make the curled antenna larger & thicker so they're visible when scaled down. It's fine if more details are visible at larger sizes, but I'd like the essence understandable at small sizes.

Also: This isn't square. I know that .ico files for websites must be square. Should we have a square icon?

from flawfinder.

BTW, I do really like the curling antennas. They're adorable!

from flawfinder.

You might make more room for the antennas by making the second "f" a little smaller. Not too small, just a little so the antennas can be more prominent while still leaving room for the rest.

from flawfinder.

@jeffersonking, some great additional feedback on this. @david-a-wheeler, totally agree w/everything you've said.

from flawfinder.

from flawfinder.

A design idea from @jeffersonking. the idea is that the 'flawfinder' f's comprise the insect antennae. clever direction!

from flawfinder.

Original, big eyes, small eyes, dark eyes, light eyes. Which one is the best?

from flawfinder.

More realistic eyes, and a smile (@michaelcfanning's suggestion).

from flawfinder.

I like the smile! That makes it much clearer that it's a face (and it's cute, too).

The one with the magnifying glass & bug antennas is really good too.

Tough contest!

from flawfinder.

One problem with the one-with-eyes is the huge unused ring around it. I don't think "FF" will be visible in 16x16 or even 32x32. Maybe the empty ring could be very narrow, expanding the bug and antenna to fill the area. A bigger smile would be good too, so that it's visible when scaled down to small sizes.

from flawfinder.

I should clarify, the white ring was meant to mimic the Github Marketplace treatment of these icons. The actual icon is the 28x28 inner circle.

from flawfinder.

how about this colored bug icon (https://www.flaticon.com/free-icon/bug_785104) replacing feet with character F. (Sorry i am not good at photoshopping)

from flawfinder.

The "F"s could be moved up a little to make room for a bigger smile.

from flawfinder.

how about this colored bug icon (https://www.flaticon.com/free-icon/bug_785104) replacing feet with character F. (Sorry i am not good at photoshopping)

Then there would be 6 F's?

from flawfinder.

@yongyan-gh - if it's just a bug with an "f" on the bottom, it looks too much like the bug is winning. Not the goal :-).

from flawfinder.

It's not quite as bad with a smiling bug - if it's smiling it's probably on your side :-).

from flawfinder.

In context on a the Marketplace page. I think this might be a good time to apply some color.

from flawfinder.

how about this colored bug icon (https://www.flaticon.com/free-icon/bug_785104) replacing feet with character F. (Sorry i am not good at photoshopping)

Then there would be 6 F's?

something like :)

from flawfinder.

how about this colored bug icon (https://www.flaticon.com/free-icon/bug_785104) replacing feet with character F. (Sorry i am not good at photoshopping)

Then there would be 6 F's?

something like :)

Maybe angle the F inwards so the bottom looks more like a leg. 🤔

from flawfinder.

In this one, it looks like the bug lost its legs.

Subjectively I like the smiley bug or the magnifying glass versions better. No, I couldn't explain why. I do agree that color is good though.

from flawfinder.

I like this one. It's cute. And it has the strongest double-F's that help focus on the flaw finder brand.

from flawfinder.

I like this version as well among the "smiling bug" versions. Strong double-Fs, and cute as well.

The magnifying glass one is pretty nice too.

Any other proposals?

from flawfinder.

So, David, Jeff is, in fact, going to go revisit the magnifying glass idea so that we can consider both proposals. However, we'd really like to get your action into GH he workflows content (https://github.com/actions/starter-workflows). There's a blog post going out about this very soon and we'd love Flawfinder to be mentioned in it.

So how about we ship the smiley bug for now? Jeff will work on the other idea and you can review, switch icons if you decide the new one (or some other entirely) is an improvement.

from flawfinder.

I have already prepared the changes about onboarding Flawfinder workflow for repo (https://github.com/actions/starter-workflows). Just waiting for the svg icon to create a PR.

from flawfinder.

The smiley bug is available now, so I'm happy to use it for now (& maybe just stay there).

However, the workflow never returns a status code other than "okay" which seems wrong. When I tried to fix it, flawfinder itself fails because it has lots of demo errors (I think that's the reason): #54

I think we need to fix the workflow code so it returns a status code (we could try to detect flawfinder itself as a special case & skip itself). Comments welcome on that pull request here: #54

from flawfinder.

@david-a-wheeler i am checking the PR.

@jeffersonking , do you have a svg version of the smiley bug icon? the workflow needs the .svg file.

from flawfinder.

Issue #54 is fixed, I misunderstood the problem. Once I understood things, it was trivial to fix.

@jeffersonking - can you send that SVG version of the smiley bug icon, so that it can be used as the flawfinder logo (at least for now)?

from flawfinder.

@david-a-wheeler , can you publish the flawfinder-action?

that will help us finish the actions workflow.
thank you

from flawfinder.

@eddynaka - I took some actions and think I published flawfinder-action. Please let me know if it actually worked.

from flawfinder.

@jeffersonking - can you send that SVG version of the smiley bug icon, so that it can be used as the flawfinder logo (at least for now)?

from flawfinder.

I'm going to be away from keyboard for probably 24 hours, but I'll be back.

from flawfinder.

I'm having issues attaching the file, so here is the source.

<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="14" cy="14" r="14" fill="#C4C4C4"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="28">
<circle cx="14" cy="14" r="14" fill="#CCCCCC"/>
</mask>
<g mask="url(#mask0)">
<path d="M16 17V11M22 6H16V11M16 11H20" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 17V11M6 6H12V11M12 11H8" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="14" cy="30" r="14" fill="#333333"/>
<circle cx="17" cy="21" r="2" fill="white"/>
<circle cx="17" cy="21" r="1" fill="black"/>
<circle cx="11" cy="21" r="2" fill="white"/>
<circle cx="11" cy="21" r="1" fill="black"/>
<path d="M11.5 25C11.5 25 12.5 25.5 14 25.5C15.5 25.5 16.5 25 16.5 25" stroke="white" stroke-linecap="round"/>
</g>
</svg>

from flawfinder.

@michaelcfanning Here's a stab at the magnifying glass concept. It's more difficult to illustrate so there are still visual "bugs" and balance issues to sort out. Also haven't been able to draw the bug yet. I like the magnified "f" concept though. Note, I've added the Github "disc" background to help set the context.

from flawfinder.

@eddynaka - I took some actions and think I published flawfinder-action. Please let me know if it actually worked.

Hi @david-a-wheeler , that action did not work: https://github.com/marketplace?type=&verification=&query=flawfinder+

Some references:
https://docs.github.com/en/actions/creating-actions/publishing-actions-in-github-marketplace

from flawfinder.

I made some further changes. I don't think it's quite working, though hopefully it's closer. Suggestions?

from flawfinder.