Add data-component attribute to Octicon SVGs (#1185)

* Add data-component attribute to Octicon SVGs

* fix snapshot

* add changeset

* fix CI: format node test and update React bundle size snapshot

Agent-Logs-Url: https://github.com/primer/octicons/sessions/aa768eed-37b6-4acf-9261-a7deb8fefd68

Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

Author: francinelucca

.changeset/add-data-component-attribute.md

@@ -0,0 +1,7 @@
+---
+"@primer/octicons": minor
+"@primer/octicons-react": minor
+"@primer/styled-octicons": minor
+---
+
+Add `data-component="Octicon"` attribute to all SVG elements for easier identification and styling

lib/octicons_gem/lib/octicons/octicon.rb

@@ -17,7 +17,8 @@ def initialize(symbol, options = {})
         @options.merge!({
           class:   classes,
           viewBox: viewbox,
-          version: "1.1"
+          version: "1.1",
+          "data-component": "Octicon"
         })
         @options.merge!(size)
         @options.merge!(a11y)

lib/octicons_gem/test/octicon_test.rb

@@ -134,4 +134,11 @@
       assert_includes icon.to_svg, "aria-hidden=\"true\""
     end
   end
+
+  describe "data-component" do
+    it "has data-component attribute" do
+      icon = octicon("x")
+      assert_includes icon.to_svg, "data-component=\"Octicon\""
+    end
+  end
 end

lib/octicons_node/index.js

@@ -55,7 +55,8 @@ for (const key of Object.keys(data)) {
       height: parseInt(height),
       viewBox: `0 0 ${data[key].heights[height].width} ${height}`,
       class: `octicon octicon-${key}`,
-      'aria-hidden': 'true'
+      'aria-hidden': 'true',
+      'data-component': 'Octicon'
     }
   }
 

lib/octicons_node/tests/index.js

@@ -27,6 +27,7 @@ test('Octicons have default html attributes', t => {
       new RegExp(`class="octicon octicon-${octicons[point].symbol}"`),
       `The octicon "${point}" doesn't have the class attribute`
     )
+    t.regex(svg, /data-component="Octicon"/, `The octicon "${point}" doesn't have the data-component attribute`)
   }
 })
 

lib/octicons_react/__tests__/tree-shaking.test.js

@@ -50,5 +50,5 @@ test('tree shaking single export', async () => {
   })
 
   const bundleSize = Buffer.byteLength(output[0].code.trim()) / 1000
-  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"6.084kB"`)
+  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"6.119kB"`)
 })

lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap

@@ -4,6 +4,7 @@ exports[`An icon component matches snapshot 1`] = `
 <svg
   aria-hidden="true"
   class="octicon octicon-alert"
+  data-component="Octicon"
   display="inline-block"
   fill="currentColor"
   focusable="false"

lib/octicons_react/src/__tests__/octicon.js

@@ -14,6 +14,11 @@ describe('An icon component', () => {
     expect(container.querySelector('svg')).toHaveAttribute('aria-hidden', 'true')
   })
 
+  it('has `data-component="Octicon"` attribute', () => {
+    const {container} = render(<AlertIcon />)
+    expect(container.querySelector('svg')).toHaveAttribute('data-component', 'Octicon')
+  })
+
   it('sets `role="img"` if `aria-label` is provided', () => {
     render(<AlertIcon aria-label="Alert" />)
     expect(screen.getByLabelText('Alert')).toHaveAttribute('role', 'img')

lib/octicons_react/src/createIconComponent.js

@@ -53,6 +53,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
           id={id}
           display="inline-block"
           overflow="visible"
+          data-component="Octicon"
           style={{
             verticalAlign,
             ...style