Use phila-ui Icon component instead of svgs directly

Author: jackmanleydev

apps/philly-311/frontend/src/components/ReportListingCard.vue

@@ -3,6 +3,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Tags } from '@phila/phila-ui-tags'
+import { Icon } from '@phila/phila-ui-core'
 import { IconImage, IconCircleCheck, IconClock } from '@phila/phila-ui-core/icons'
 import type { Report } from '@/composables/useNearbyReports'
 import { statusIconTreatment } from '@/utils/reportCard'
@@ -22,7 +23,7 @@ const statusIcon = computed(() =>
     <div class="listing-card__media">
       <img v-if="report.mediaUrl" class="listing-card__photo" :src="report.mediaUrl" alt="" />
       <div v-else class="listing-card__photo listing-card__photo--placeholder">
-        <IconImage aria-hidden="true" />
+        <Icon :icon="IconImage" decorative size="extra-small" />
       </div>
     </div>
     <div class="listing-card__content">
@@ -66,7 +67,6 @@ const statusIcon = computed(() =>
   justify-content: center;
   background: var(--Schemes-Border-low, #e3e3e3);
   color: var(--Schemes-Border, #a1a1a1);
-  font-size: 1.5rem;
 }
 .listing-card__content {
   display: flex;

apps/philly-311/frontend/src/components/answers/ArticleCard.vue

@@ -1,5 +1,6 @@
 <!-- ABOUTME: List row for a knowledge article; whole row links to the detail page. -->
 <script setup lang="ts">
+import { Icon } from '@phila/phila-ui-core'
 import { IconChevronRight } from '@phila/phila-ui-core/icons'
 import type { Article } from '@/composables/useKnowledgeArticles'
 
@@ -10,7 +11,7 @@ defineProps<{ article: Article }>()
   <article class="article-card">
     <RouterLink class="article-card__link" :to="`/answers/${article.id}`">
       <span class="article-card__title">{{ article.title }}</span>
-      <IconChevronRight class="article-card__chevron" aria-hidden="true" />
+      <Icon :icon="IconChevronRight" decorative class="article-card__chevron" />
     </RouterLink>
   </article>
 </template>

apps/philly-311/frontend/src/components/answers/FeaturedArticles.vue

@@ -2,6 +2,7 @@
      (Salesforce featured list view). Hides itself when the fetch fails or is empty. -->
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { Icon } from '@phila/phila-ui-core'
 import { IconStar } from '@phila/phila-ui-core/icons'
 import { useKnowledgeArticles, type Article } from '@/composables/useKnowledgeArticles'
 
@@ -32,7 +33,7 @@ onMounted(async () => {
   <ul v-if="articles.length > 0" class="featured" aria-label="Featured articles">
     <li v-for="article in articles" :key="article.id" class="featured__card">
       <RouterLink class="featured__link" :to="`/answers/${article.id}`">
-        <IconStar class="featured__icon" aria-hidden="true" />
+        <Icon :icon="IconStar" decorative class="featured__icon" />
         <span class="featured__title">{{ article.title }}</span>
       </RouterLink>
     </li>

apps/philly-311/frontend/src/components/answers/__tests__/ArticleCard.test.ts

@@ -27,6 +27,6 @@ describe('ArticleCard', () => {
       props: { article },
       global: { stubs: { RouterLink: RouterLinkStub } },
     })
-    expect(w.find('svg[aria-hidden="true"].article-card__chevron').exists()).toBe(true)
+    expect(w.find('.article-card__chevron[aria-hidden="true"]').exists()).toBe(true)
   })
 })

apps/philly-311/frontend/src/pages/AnswersPage.vue

@@ -9,6 +9,7 @@ import ArticleCard from '@/components/answers/ArticleCard.vue'
 import FeaturedArticles from '@/components/answers/FeaturedArticles.vue'
 import { PhilaButton } from '@phila/phila-ui-button'
 import heroPhoto from '@/assets/answers-hero.jpg'
+import { Icon } from '@phila/phila-ui-core'
 import { IconMagnifyingGlass, IconSort } from '@phila/phila-ui-core/icons'
 
 const k = useKnowledgeArticles()
@@ -92,12 +93,12 @@ onMounted(loadPage)
           class="answers__search-input"
           placeholder="Search by topic or keyword"
         />
-        <IconMagnifyingGlass class="answers__search-icon" aria-hidden="true" />
+        <Icon :icon="IconMagnifyingGlass" decorative class="answers__search-icon" />
       </div>
 
       <div v-if="!isSearching" class="answers__chips">
         <label class="answers__chip">
-          <IconSort class="answers__chip-icon" aria-hidden="true" />
+          <Icon :icon="IconSort" decorative size="extra-small" />
           <select
             v-model="sortChoice"
             class="answers__chip-select"
@@ -234,9 +235,6 @@ onMounted(loadPage)
   border: 1px solid var(--Schemes-Border-low, #d6d6d6);
   border-radius: 16px;
 }
-.answers__chip-icon {
-  font-size: 0.875rem;
-}
 .answers__chip-select {
   border: none;
   background: transparent;

apps/philly-311/frontend/src/pages/__tests__/AnswersPage.test.ts

@@ -48,7 +48,7 @@ describe('AnswersPage', () => {
     expect(w.find('input[type="search"]').attributes('placeholder')).toBe(
       'Search by topic or keyword',
     )
-    expect(w.find('.answers__search svg[aria-hidden="true"]').exists()).toBe(true)
+    expect(w.find('.answers__search .answers__search-icon[aria-hidden="true"]').exists()).toBe(true)
   })
 
   it('mounts the featured-articles strip below the hero', async () => {

apps/philly-311/frontend/vitest.config.ts

@@ -14,5 +14,14 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true,
     setupFiles: ['./src/__tests__/setup.ts'],
+    // @phila/phila-ui-core's main entry has a side-effect `import './index.css'`.
+    // Left externalized, Vitest loads it via Node's own resolver, which can't
+    // handle a bare .css import; inlining routes it through Vite's transform
+    // instead, which strips/no-ops CSS imports like it does for the real app build.
+    server: {
+      deps: {
+        inline: ['@phila/phila-ui-core'],
+      },
+    },
   },
 })