Add an svg icon file for GitHub actions

[david-a-wheeler]

"An svg icon file is required to show the flawfinder workflow in security tab." in GitHub actions per #49 This isn't an .ico file.

Do we have actual artistic capabilities? Otherwise I'll create a trivial icon, and we can replace it later when someone with talent can create it.

[david-a-wheeler]

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).

[david-a-wheeler]

@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.

[eddynaka]

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

[david-a-wheeler]

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:

[david-a-wheeler]

@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.

[david-a-wheeler]

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).

[michaelcfanning]

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.

[michaelcfanning]

[michaelcfanning]

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.

[david-a-wheeler]

@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.

[michaelcfanning]

[michaelcfanning]

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.

[david-a-wheeler]

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?

[michaelcfanning]

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.

[david-a-wheeler]

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!

[michaelcfanning]

[michaelcfanning]

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.

[david-a-wheeler]

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?

[david-a-wheeler]

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

[david-a-wheeler]

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.

[michaelcfanning]

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

[michaelcfanning]

[michaelcfanning]

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

[david-a-wheeler]

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.

[jeffersonking]

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

[david-a-wheeler]

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.

[jeffersonking]

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

[david-a-wheeler]

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!

[david-a-wheeler]

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.

[jeffersonking]

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.

[david-a-wheeler]

@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 :-).

[yongyan-gh]

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)

[david-a-wheeler]

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

[jeffersonking]

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?

[david-a-wheeler]

@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 :-).

[david-a-wheeler]

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

[jeffersonking]

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

[jeffersonking]

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

[yongyan-gh]

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 :)

[jeffersonking]

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. 🤔

[david-a-wheeler]

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.

[michaelcfanning]

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

[david-a-wheeler]

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?

[michaelcfanning]

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.

[yongyan-gh]

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.

[david-a-wheeler]

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

[yongyan-gh]

@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.

[david-a-wheeler]

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)?

[eddynaka]

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

that will help us finish the actions workflow.
thank you

[david-a-wheeler]

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

[david-a-wheeler]

@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)?

[david-a-wheeler]

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

[jeffersonking]

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>

[jeffersonking]

@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.

[eddynaka]

@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

[david-a-wheeler]

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