Revert icon reimplementation as inline style

app/assets/stylesheets/components/_language-picker.scss

@@ -43,6 +43,18 @@
     }
   }
 
+  span {
+    margin: 0 units(1);
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    width: 0.8125rem;
+    height: 0.8125rem;
+    background-size: 0.8125rem;
+  }
+
   &.usa-accordion__button[aria-expanded='false'],
   &.usa-accordion__button[aria-expanded='true'] {
     background-image: none;
@@ -52,28 +64,23 @@
     &:hover {
       background-color: transparent;
     }
+
+    &::after {
+      background-image: url('/angle-arrow-up.svg');
+
+      @include at-media('tablet') {
+        background-image: url('/angle-arrow-up-white.svg');
+      }
+    }
   }
 
   &.usa-accordion__button[aria-expanded='true'] {
     @include u-bg('primary');
     color: color('white');
-  }
-}
-
-.language-picker__label-text {
-  margin-left: units(1);
-  margin-right: units(0.5);
-}
 
-.language-picker__expander {
-  transition: transform $project-easing;
-
-  @media (prefers-reduced-motion) {
-    transition: none;
-  }
-
-  .usa-accordion__button[aria-expanded='false'] & {
-    transform: rotate(-180deg);
+    &::after {
+      background-image: url('/angle-arrow-down-white.svg');
+    }
   }
 }
 

app/components/icon_component.html.erb

@@ -1,11 +1,10 @@
 <%= content_tag(
-      :span,
-      content_tag(
-        :style,
-        "#icon-#{unique_id} { mask-image: url(#{icon_path}); -webkit-mask-image: url(#{icon_path}); }",
-        nonce: content_security_policy_nonce,
-      ),
+      :svg,
+      aria: { hidden: true },
+      focusable: 'false',
+      role: 'img',
       **tag_options,
-      id: "icon-#{unique_id}",
       class: css_class,
-    ) -%>
+    ) do %>
+  <use href="<%= icon_path %>"></use>
+<% end %>

app/components/icon_component.rb

@@ -255,13 +255,13 @@ def initialize(icon:, size: nil, **tag_options)
   end
 
   def css_class
-    classes = ['icon', 'usa-icon', *tag_options[:class]]
+    classes = ['usa-icon', *tag_options[:class]]
     classes << "usa-icon--size-#{size}" if size
     classes
   end
 
   def icon_path
-    @icon_path ||= asset_path("usa-icons/#{icon}.svg", host: asset_host)
+    asset_path([asset_path('sprite.svg'), '#', icon].join, host: asset_host)
   end
 
   private

app/components/icon_component.scss

@@ -3,11 +3,6 @@
 
 @forward 'usa-icon';
 
-.icon {
-  mask-size: 100%;
-  background-color: currentColor;
-}
-
 $icon-min-padding: 2px;
 
 // Upstream: https://github.com/uswds/uswds/pull/4493

app/components/language_picker_component.html.erb

@@ -7,11 +7,11 @@
           expanded: false,
         },
       ) do %>
-    <%= render IconComponent.new(icon: :language) %>
-    <span id="language-picker-description-<%= unique_id %>" class="language-picker__label-text">
+    <%= image_tag(asset_url('globe-blue.svg'), width: 12, height: 12, alt: '', class: 'tablet:display-none') %>
+    <%= image_tag(asset_url('globe-white.svg'), width: 12, height: 12, alt: '', class: 'display-none tablet:display-inline') %>
+    <span id="language-picker-description-<%= unique_id %>">
       <%= t('i18n.language') %>
     </span>
-    <%= render IconComponent.new(icon: :expand_more, size: 3, class: 'language-picker__expander') %>
   <% end %>
   <ul
     id="language-picker-<%= unique_id %>"

config/initializers/content_security_policy.rb

@@ -47,5 +47,5 @@
 # rubocop:enable Metrics/BlockLength
 Rails.application.configure do
   config.content_security_policy_nonce_generator = ->(request) { request.session.id.to_s }
-  config.content_security_policy_nonce_directives = ['script-src', 'style-src']
+  config.content_security_policy_nonce_directives = ['script-src']
 end

spec/components/button_component_spec.rb

@@ -83,7 +83,7 @@
     it 'renders an icon' do
       rendered = render_inline ButtonComponent.new(icon: :print).with_content(content)
 
-      expect(rendered).to have_xpath('//style[contains(text(), "/print-")]')
+      expect(rendered).to have_css('use[href$="#print"]')
       expect(rendered.first_element_child.xpath('./text()').text).to eq(content)
     end
 
@@ -93,7 +93,7 @@
       it 'trims text of the content, maintaining html safety' do
         rendered = render_inline ButtonComponent.new(icon: :print).with_content(content)
 
-        expect(rendered.to_html).to include('</span><span class="example">Button</span>')
+        expect(rendered.to_html).to include('</svg><span class="example">Button</span>')
       end
     end
 
@@ -103,9 +103,7 @@
       it 'trims text of the content, maintaining html safety' do
         rendered = render_inline ButtonComponent.new(icon: :print).with_content(content)
 
-        expect(rendered.to_html).to include(
-          '</span>&lt;span class="example"&gt;Button&lt;/span&gt;',
-        )
+        expect(rendered.to_html).to include('</svg>&lt;span class="example"&gt;Button&lt;/span&gt;')
       end
     end
 

spec/components/icon_component_spec.rb

@@ -12,15 +12,9 @@
   it 'renders icon svg' do
     rendered = render_inline IconComponent.new(icon: :print)
 
-    icon = rendered.at_css('.icon.usa-icon')
-    id = icon.attr(:id)
-    inline_style = rendered.at_css('style').text.strip
-
-    expect(icon).to be_present
-    expect(inline_style).to match(%r{##{id}\s{.+?}}).
-      and(include('-webkit-mask-image:')).
-      and(include('mask-image:')).
-      and(match(%r{url\([^)]+/print-\w+\.svg\)}))
+    expect(rendered).to have_css(
+      ".usa-icon use[href^='#{vc_test_request.base_url}'][href$='.svg#print']",
+    )
   end
 
   context 'with invalid icon' do
@@ -33,23 +27,23 @@
     it 'adds size variant class' do
       rendered = render_inline IconComponent.new(icon: :print, size: 2)
 
-      expect(rendered).to have_css('.icon.usa-icon.usa-icon--size-2')
+      expect(rendered).to have_css('.usa-icon.usa-icon--size-2')
     end
   end
 
   context 'with custom class' do
     it 'renders with class' do
       rendered = render_inline IconComponent.new(icon: :print, class: 'my-custom-class')
 
-      expect(rendered).to have_css('.icon.usa-icon.my-custom-class')
+      expect(rendered).to have_css('.usa-icon.my-custom-class')
     end
   end
 
   context 'with tag options' do
     it 'renders with attributes' do
       rendered = render_inline IconComponent.new(icon: :print, data: { foo: 'bar' })
 
-      expect(rendered).to have_css('.icon.usa-icon[data-foo="bar"]')
+      expect(rendered).to have_css('.usa-icon[data-foo="bar"]')
     end
   end
 
@@ -61,9 +55,9 @@
     it 'bypasses configured asset_host and uses domain_name instead' do
       rendered = render_inline IconComponent.new(icon: :print)
 
-      inline_style = rendered.at_css('style').text.strip
+      href = rendered.css('use').first['href']
 
-      expect(inline_style).to match(%r{url\(#{Regexp.escape(domain_name)}})
+      expect(href).to start_with(domain_name)
     end
   end
 end

spec/components/icon_list_component_spec.rb

@@ -35,7 +35,7 @@
 
     it 'renders items with default color' do
       expect(rendered).to have_css('.usa-icon-list__icon:not([class*="text-"])', count: 2)
-      expect(rendered).to have_xpath('//style[contains(text(), "/cancel-")]')
+      expect(rendered).to have_css('.usa-icon use[href$=".svg#cancel"]', count: 2)
     end
 
     context 'with icon or color attributes specified on parent component' do
@@ -48,7 +48,7 @@
 
       it 'passes those attributes to slotted items' do
         expect(rendered).to have_css('.usa-icon-list__icon.text-error', count: 2)
-        expect(rendered).to have_xpath('//style[contains(text(), "/cancel-")]', count: 2)
+        expect(rendered).to have_css('.usa-icon use[href$=".svg#cancel"]', count: 2)
       end
     end
 
@@ -62,9 +62,9 @@
 
       it 'renders items with their attributes' do
         expect(rendered).to have_css('.usa-icon-list__icon.text-success', count: 1)
-        expect(rendered).to have_xpath('//style[contains(text(), "/check_circle-")]', count: 1)
+        expect(rendered).to have_css('.usa-icon use[href$=".svg#check_circle"]', count: 1)
         expect(rendered).to have_css('.usa-icon-list__icon.text-error', count: 1)
-        expect(rendered).to have_xpath('//style[contains(text(), "/cancel-")]', count: 1)
+        expect(rendered).to have_css('.usa-icon use[href$=".svg#cancel"]', count: 1)
       end
     end
 

spec/features/phone/add_phone_spec.rb

@@ -6,7 +6,7 @@
     phone = '+1 (225) 278-1234'
 
     sign_in_and_2fa_user(user)
-    expect(page).to have_link(href: phone_setup_path, text: t('account.index.phone_add'))
+    expect(page).to have_link(t('account.index.phone_add'), normalize_ws: true, exact: true)
     within('.sidenav') do
       click_on t('account.navigation.add_phone_number')
     end

spec/requests/csp_spec.rb

@@ -31,7 +31,7 @@
         expect(content_security_policy['script-src']).to match(
           /'self' 'unsafe-eval' 'nonce-[\w\d=\/+]+'/,
         )
-        expect(content_security_policy['style-src']).to match(/'self' 'nonce-[\w\d=\/+]+'/)
+        expect(content_security_policy['style-src']).to eq("'self'")
       end
 
       it 'uses logout SP to override CSP form action that will allow a redirect to the CSP' do
@@ -75,7 +75,7 @@
         expect(content_security_policy['script-src']).to match(
           /'self' 'unsafe-eval' 'nonce-[\w\d=\/+]+'/,
         )
-        expect(content_security_policy['style-src']).to match(/'self' 'nonce-[\w\d=\/+]+'/)
+        expect(content_security_policy['style-src']).to eq("'self'")
       end
 
       it 'uses logout SP to override CSP form action that will allow a redirect to the CSP' do
@@ -111,7 +111,7 @@
       expect(content_security_policy['script-src']).to match(
         /'self' 'unsafe-eval' 'nonce-[\w\d=\/+]+'/,
       )
-      expect(content_security_policy['style-src']).to match(/'self' 'nonce-[\w\d=\/+]+'/)
+      expect(content_security_policy['style-src']).to eq("'self'")
     end
   end