Adds bug, flag, and heart icons. Updates alert icon.

[ryankeairns]

Closes #1871

Summary

#1871 requests several icons:

• bomb
• bug
• exclamation-circle
• exclamation-triangle
• fire
• flag
• heart

This PR adds the following news icons to EUI which we feel are most re-usable/common:

• bug, flag, and heart

For bomb and fire, I've created the svg icons and will open a separate PR on the Kibana side to add those. In the upcoming release of EUI, functionality will exist allowing you to use any icon with EuiIcon. We felt these two were better suited to live externally as we're also trying to keep our ever-expanding icon library manageable.

For the exclamation-triangle, we recommend using the existing alert icon

For the exclamation-circle, we recommend using the existing iInCircle icon
This better differentiates it from the exclamation-triangle icon while conveying a less severe, "informational", meaning like making a note.

---

⚖️ Side note: I updated the svg for the alert icon since the right corner was a little askew
Here is what it looked like before

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios
• This required updates to Framer X components

[ryankeairns]

@snide Where should the two non-EUI icons (bomb and fire) be stored in the Kibana repo?

Globally available in one of these places...

src/legacy/ui/public/assets/images/
src/legacy/core_plugins/kibana/public/assets/

...or with the TSVB plugin code?

cc: @Avinar-24 @alexwizp

[snide]

LGTM. The alert is a little softer, likely because you're not positioning it exactly on the grid (which is why it was probably off center originally). I could go either way on which is more annoying, so this is fine.

[ryankeairns]

I don't see the fuzziness on my side, or at least it's not as noticeable. All I really did was pull in the right point a smidge, so I'm going to roll with this newer version.

[cchaos]

@ryankeairns The fuzzyness happens when not on a ultra-dense (retina) style monitor. You'd need an older monitor to test this the actual render, but to mitigate these from happening, aligning as much to the pixel grid as possible will ensure it's as crisp as possible.

The alert screenshot you showed (I'm guessing older is on the right?) does look odd. I'm not sure why the right bottom point of the triangle was further out.

I had to glance at the Sketch file to look at the pixel alignment and the alert is fine, I wish the exclamation point could be more inside the pixel line instead of straddling it like this:

---

As for the new icons they all look good except that the flag could use a nudge to the left:

[cchaos]

Also for your recommendation:

For the exclamation-circle, we recommend using the existing iInCircle icon.

You should recommend that they just use the alert icon as well because they both use an exclamation. The iInCircle is more "information" while the alert is "warning".

[ryankeairns]

@cchaos Such is the life of a 1px outline-based icon set :)

Good catch on the flag! Initially, I was shaving off bytes by building these as lines as opposed to shapes, but that visually got away from our existing pattern of 1 and 2 pixel padding around the glyph itself. It also presented more challenges in handling the Sketch symbol color overrides, so I went with converting to outlines.

[ryankeairns]

@cchaos

Also for your recommendation:

For the exclamation-circle, we recommend using the existing iInCircle icon.

You should recommend that they just use the alert icon as well because they both use an exclamation. The iInCircle is more "information" while the alert is "warning".

The thought was that they could differentiate the two better by using one as an informational-level warning and purposely not have two with exclamation points. I'll re-word that to state the options more clearly.

[cchaos]

Makes sense. Thx!

[ryankeairns]

jenkins test this

[ryankeairns]

@Avinar-24 @alexwizp Attached are the SVG files for the two icons we've decided should not be included with EUI (as noted above). They can be added to Kibana globally, or to the plugin code as you see fit.

fire and bomb icons.zip