Use BaseComponent
MODIFY
app/components/primer/spinner_component.html.erb
app/components/primer/spinner_component.html.erb
-<svg width="<%= @size %>" height="<%= @size %>" viewBox="0 0 16 16" color="var(--color-icon-primary)" fill="none">
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
<path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke">
- <animateTransform
- attributeName="transform"
- type="rotate"
- from="0 8 8"
- to="360 8 8"
- dur="1s"
- repeatCount="indefinite"
- />
+ <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="1s" repeatCount="indefinite" />
</path>
-</svg>
+<% end %>

MODIFY
app/components/primer/spinner_component.rb
app/components/primer/spinner_component.rb
@@ -11,8 +11,16 @@ module Primer
# <%= render(Primer::SpinnerComponent.new(size: 16)) %>
#
# @param size [Integer] Sets the size of the spinner
- def initialize(size: 32)
- @size = size
+ def initialize(size: 32, **kwargs)
+ @kwargs = kwargs
+ @kwargs[:tag] ||= :svg
+ @kwargs[:width] = size
+ @kwargs[:height] = size
+ @kwargs[:viewBox] = "0 0 16 16"
+ @kwargs[:fill] = :none
+ # Setting `box-sizing: content-box` allows consumers to add padding
+ # to the spinner without shrinking the icon
+ @kwargs[:style] = "box-sizing: content-box; color: var(--color-icon-primary);"
end
end
end
\ No newline at end of file

MODIFY
docs/content/components/spinner.md
docs/content/components/spinner.md
@@ -8,7 +8,7 @@ title: Primer::SpinnerComponent
### Default
-<iframe style="width: 100%; border: 0px; height: 48px;" srcdoc="<html><head><link href='https://unpkg.com/@primer/css/dist/primer.css' rel='stylesheet'></head><body><svg width='32' height='32' viewBox='0 0 16 16' color='var(--color-icon-primary)' fill='none'> <circle cx='8' cy='8' r='7' stroke='currentColor' stroke-opacity='0.25' stroke-width='2' vector-effect='non-scaling-stroke' /> <path d='M15 8a7.002 7.002 0 00-7-7' stroke='currentColor' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'> <animateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='1s' repeatCount='indefinite' /> </path></svg></body></html>"></iframe>
+<iframe style="width: 100%; border: 0px; height: 48px;" srcdoc="<html><head><link href='https://unpkg.com/@primer/css/dist/primer.css' rel='stylesheet'></head><body><svg viewBox='0 0 16 16' fill='none' style='box-sizing: content-box; color: var(--color-icon-primary);' width='32' height='32'> <circle cx='8' cy='8' r='7' stroke='currentColor' stroke-opacity='0.25' stroke-width='2' vector-effect='non-scaling-stroke' /> <path d='M15 8a7.002 7.002 0 00-7-7' stroke='currentColor' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'> <animateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='1s' repeatCount='indefinite' /> </path></svg></body></html>"></iframe>
```erb
<%= render(Primer::SpinnerComponent.new()) %>
@@ -16,7 +16,7 @@ title: Primer::SpinnerComponent
### Small
-<iframe style="width: 100%; border: 0px; height: 32px;" srcdoc="<html><head><link href='https://unpkg.com/@primer/css/dist/primer.css' rel='stylesheet'></head><body><svg width='16' height='16' viewBox='0 0 16 16' color='var(--color-icon-primary)' fill='none'> <circle cx='8' cy='8' r='7' stroke='currentColor' stroke-opacity='0.25' stroke-width='2' vector-effect='non-scaling-stroke' /> <path d='M15 8a7.002 7.002 0 00-7-7' stroke='currentColor' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'> <animateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='1s' repeatCount='indefinite' /> </path></svg></body></html>"></iframe>
+<iframe style="width: 100%; border: 0px; height: 32px;" srcdoc="<html><head><link href='https://unpkg.com/@primer/css/dist/primer.css' rel='stylesheet'></head><body><svg viewBox='0 0 16 16' fill='none' style='box-sizing: content-box; color: var(--color-icon-primary);' width='16' height='16'> <circle cx='8' cy='8' r='7' stroke='currentColor' stroke-opacity='0.25' stroke-width='2' vector-effect='non-scaling-stroke' /> <path d='M15 8a7.002 7.002 0 00-7-7' stroke='currentColor' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'> <animateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='1s' repeatCount='indefinite' /> </path></svg></body></html>"></iframe>
```erb
<%= render(Primer::SpinnerComponent.new(size: 16)) %>

Use BaseComponent