Add stop icons (transparent, filled).

[bevacqua]

The filled icon needs to actually be filled, but I'm not sure what the best way of doing so is, since I copied the path for another icon to be consistent in terms of border radius.

[bevacqua]

(Only requirement for the filled icon would be that it needs to be in the same spot as the unfilled one
so that if for some reason you want to toggle between them (on hover or something), they don't appear jittery

[cchaos]

You're going to have an issue here because you use the same id (#stop-a) in both svg files. These files end up being compiled into one giant SVG. I'd suggest changing the ID or removing the <defs> entirely and just putting the path inside the <g>.

[bevacqua]

Yes, that's a bug, good call articles <https://ponyfoo.com/> · newsletter <https://ponyfoo.com/weekly> · books <https://ponyfoo.com/books> · speaking <https://ponyfoo.com/speaking> · career <https://stackoverflow.com/story/bevacqua> · github <https://github.com/bevacqua> · twitter <https://twitter.com/nzgb> · about <https://ponyfoo.com/about>

…

On Tue, Mar 20, 2018 at 3:42 PM, Caroline Horn ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In src/components/icon/assets/stop_filled.svg <#543 (comment)>: > @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> + <defs> + <path id="stop-a" d="M0,1.99406028 C0,0.892771196 0.894513756,0 1.99406028,0 L14.0059397,0 C15.1072288,0 16,0.894513756 16,1.99406028 L16,14.0059397 C16,15.1072288 15.1054862,16 14.0059397,16 L1.99406028,16 C0.892771196,16 0,15.1054862 0,14.0059397 L0,1.99406028 Z M1,1.99406028 L1,14.0059397 C1,14.5539384 1.44579254,15 1.99406028,15 L14.0059397,15 C14.5539384,15 15,14.5542075 15,14.0059397 L15,1.99406028 C15,1.44606163 14.5542075,1 14.0059397,1 L1.99406028,1 C1.44606163,1 1,1.44579254 1,1.99406028 Z"/> + </defs> + <g fill-rule="evenodd"> + <use xlink:href="#stop-a"/> You're going to have an issue here because you use the same id (#stop-a) in both svg files. These files end up being compiled into one giant SVG. I'd suggest changing the ID or removing the <defs> entirely and just putting the path inside the <g>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#543 (review)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA5BlYx7s3dcHdF5DqqUE5I8TE_35apdks5tgU2DgaJpZM4SyQsz> .

[cchaos]

@bevacqua I did some tweaking because I wanted them to align a bit better with the size of the pause and play icons so here is some code for the 2 icons if you'd like:

stop

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M4,2 L12,2 C13.1045695,2 14,2.8954305 14,4 L14,12 C14,13.1045695 13.1045695,14 12,14 L4,14 C2.8954305,14 2,13.1045695 2,12 L2,4 C2,2.8954305 2.8954305,2 4,2 Z M4,3 C3.44771525,3 3,3.44771525 3,4 L3,12 C3,12.5522847 3.44771525,13 4,13 L12,13 C12.5522847,13 13,12.5522847 13,12 L13,4 C13,3.44771525 12.5522847,3 12,3 L4,3 Z"/>
</svg>

stop_filled

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <rect width="12" height="12" x="2" y="2" fill-rule="evenodd" rx="2"/>
</svg>

[snide]

Removing myself form review since @cchaos is already running through this.

[bevacqua]

Thanks team, I took the icons from @cchaos and made them more similar by using rects in both cases. Is this okay?

stop

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <rect width="12" height="12" x="2" y="2" stroke="currentColor" fill="transparent" fill-rule="evenodd" rx="2"/>
</svg>

stop_filled

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <rect width="12" height="12" x="2" y="2" stroke="currentColor" fill-rule="evenodd" rx="2"/>
</svg>

[cchaos]

@bevacqua Unfortunately that won't work because we use the CSS fill property to color our icons. If we started using strokes, we'd have to customize each icon's CSS to allow for that property. Also, by using fills instead of strokes, we maintain the scale and design of the icon as it gets resized.

[cchaos]

Further, using <rect> vs <path> for the filled one is pretty interchangeable. However, SVGO (our SVG optimizer) tries to simplify as much as possible and I believe it at least "thinks" that using shape elements over paths will render faster. Whether that's true or not, I'm not sure and we could research.

[bevacqua]

Oh, that's fine. Updated the PR with your code then

[bevacqua]

Rebased