refactor: use Phosphor Icon auto import

src/components/Addon/AddonCardView/AddonCardViewActions.vue

@@ -36,7 +36,7 @@ const uninstallAddon = () => {
       :loading="loading"
       :disabled="loading"
       truncate
-      icon-left="cloud-arrow-down"
+      :icon-left="PhCloudArrowDown"
       variant="action"
       class="flex-grow-0"
       @click="installAddon"

src/components/Addon/AddonUrlInput.vue

@@ -13,7 +13,7 @@
       @update:model-value="(newValue) => (url = newValue)"
     /><button-icon
       variant="tertiary"
-      icon-left="cloud-arrow-down"
+      :icon-left="PhCloudArrowDown"
       class="ms-2 text-nowrap rounded-1"
       :disabled="!isFormValid || loading"
       :loading="loading"

src/components/Button/ButtonAdd.vue

@@ -13,7 +13,7 @@ defineProps({
     :label="label ?? $t('buttonAdd.label')"
     class="button-add"
     hide-label
-    icon-left="plus"
+    :icon-left="PhPlus"
     pill
     square
     variant="action"

src/components/Button/ButtonClearSearch.vue

@@ -7,6 +7,6 @@ import ButtonIcon from '@/components/Button/ButtonIcon'
     class="button-clear-search"
     variant="outline-light"
     :label="$t('buttonClearSearch.label')"
-    icon-left="eraser"
+    :icon-left="PhEraser"
   />
 </template>

src/components/Button/ButtonDownloadDocuments.vue

@@ -3,7 +3,6 @@ import ButtonIcon from '@/components/Button/ButtonIcon'
 import { ICON_WEIGHT } from '@/enums/iconWeights'
 
 const iconLeftHoverWeight = ICON_WEIGHT.BOLD
-const icon = 'download-simple'
 </script>
 
 <template>
@@ -12,7 +11,7 @@ const icon = 'download-simple'
     variant="link"
     :label="$t('buttonDownloadDocuments.label')"
     hide-label
-    :icon-left="icon"
+    :icon-left="PhDownloadSimple"
     :icon-left-hover-weight="iconLeftHoverWeight"
     :square="true"
   />

src/components/Button/ButtonTag.vue

@@ -17,7 +17,7 @@ const emit = defineEmits(['delete'])
 
 <template>
   <search-parameter
-    icon="hash"
+    :icon="PhHash"
     filter="tag"
     class="text-action-emphasis"
     :term="label"

src/components/Button/ButtonToTop.vue

@@ -3,5 +3,5 @@ import ButtonIcon from '@/components/Button/ButtonIcon'
 </script>
 
 <template>
-  <button-icon class="button-to-top" :label="$t('buttonToTop.label')" variant="action" icon-right="arrow-circle-up" />
+  <button-icon class="button-to-top" :label="$t('buttonToTop.label')" variant="action" :icon-right="PhArrowCircleUp" />
 </template>

src/components/Button/ButtonToggleAdvancedSearch.vue

@@ -42,7 +42,7 @@ const compact = computed(() => {
     :square="compact"
     :variant="variant"
     class="button-toggle-advanced-search"
-    icon-right="eyeglasses"
+    :icon-right="PhEyeglasses"
     @click="toggle"
   />
 </template>

src/components/Button/ButtonToggleFilters.vue

@@ -35,7 +35,7 @@ const compact = computed(() => {
   <button-icon
     class="button-toggle-filters"
     :label="$t('buttonToggleFilters.label')"
-    icon-left="funnel"
+    :icon-left="PhFunnel"
     :square="compact"
     :hide-label="compact"
     :loading="loading"

src/components/Button/ButtonTogglePin.vue

@@ -17,8 +17,8 @@ defineProps({
     default: 'link'
   },
   icon: {
-    type: String,
-    default: 'push-pin'
+    type: [String, Object, Array],
+    default: PhPushPin
   }
 })
 

src/components/Button/ButtonToggleRecommendation.vue

@@ -23,7 +23,7 @@ const label = computed(() => {
 <template>
   <button-icon
     variant="action"
-    icon-left="eyes"
+    :icon-left="PhEyes"
     icon-left-weight="fill"
     class="button-toggler-recommendation text-white"
     :label="label"

src/components/Button/ButtonToggleSearchBreadcrumb.vue

@@ -45,12 +45,12 @@ const iconLeftWeight = computed(() => {
     :counter-variant="counterVariant"
     :disabled="disabled"
     :icon-left-weight="iconLeftWeight"
+    :icon-left="PhPath"
     :label="$t('buttonToggleSearchBreadcrumb.label')"
     :loading="loading"
     :variant="variant"
     class="button-toggle-search-breadcrumb"
     hide-label
-    icon-left="path"
     square
     @click="toggle"
   />

src/components/Button/ButtonToggleSettings.vue

@@ -16,10 +16,10 @@ const toggle = () => {
 
 <template>
   <button-icon
+    :icon-left="PhSlidersHorizontal"
     :label="$t('buttonToggleSettings.label')"
     class="button-toggle-settings border-0"
     hide-label
-    icon-left="sliders-horizontal"
     square
     variant="outline-secondary"
     @click="toggle"

src/components/Button/ButtonToggleSidebar.vue

@@ -21,7 +21,7 @@ const weight = computed(() => {
 <template>
   <button-icon
     tooltip-placement="right"
-    icon-left="sidebar-simple"
+    :icon-left="PhSidebarSimple"
     :icon-left-weight="weight"
     square
     hide-label

src/components/Document/DocumentCarousel/DocumentCarousel.vue

@@ -49,7 +49,7 @@ const adjustedPosition = computed({
     />
     <div class="document-carousel__content p-3">
       <document-carousel-nav
-        icon="caret-left"
+        :icon="PhCaretLeft"
         class="document-carousel__content__nav"
         :disabled="disabledPrevious"
         :label="$t('documentCarousel.previous')"
@@ -59,7 +59,7 @@ const adjustedPosition = computed({
         <slot />
       </div>
       <document-carousel-nav
-        icon="caret-right"
+        :icon="PhCaretRight"
         class="document-carousel__content__nav"
         :disabled="disabledNext"
         :label="$t('documentCarousel.next')"

src/components/Document/DocumentLocalSearch/DocumentLocalSearchNav.vue

@@ -15,13 +15,13 @@ defineProps({
   <b-button-group>
     <document-local-search-nav-item
       :disabled="disabledPrevious"
-      icon="caret-up"
+      :icon="PhCaretUp"
       label="Find the previous occurrence"
       @click="$emit('previous')"
     />
     <document-local-search-nav-item
       :disabled="disabledNext"
-      icon="caret-down"
+      :icon="PhCaretDown"
       label="Find the next occurrence"
       @click="$emit('next')"
     />

src/components/Document/DocumentSearchNav/DocumentSearchNav.vue

@@ -19,14 +19,14 @@ defineProps({
   <div class="document-search-nav">
     <slot>
       <document-search-nav-item
-        icon="caret-left"
+        :icon="PhCaretLeft"
         :label="$t('documentSearchNavItem.previous')"
         :disabled="disabledPrevious"
         :tooltip-placement="tooltipPlacement"
         @click="$emit('previous')"
       />
       <document-search-nav-item
-        icon="caret-right"
+        :icon="PhCaretRight"
         :label="$t('documentSearchNavItem.next')"
         :disabled="disabledNext"
         :tooltip-placement="tooltipPlacement"

src/components/PathTree/PathTreeView/PathTreeViewEntryMore.vue

@@ -37,7 +37,7 @@ const size = computed(() => (compactOrInjected.value ? 'sm' : 'md'))
 <template>
   <button-icon
     v-if="directoriesLeft > 0"
-    icon-left="caret-down"
+    :icon-left="PhCaretDown"
     icon-left-variant="primary"
     class="shadow-lg text-nowrap"
     variant="outline-tertiary"

vite.config.js

@@ -5,6 +5,7 @@ import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import vue from '@vitejs/plugin-vue'
 
+import { PhosphorVuePreset } from './bin/presets'
 import { PhosphorVueResolver } from './bin/resolvers'
 import { BootstrapVueNextResolver } from 'unplugin-vue-components/resolvers'
 
@@ -37,6 +38,9 @@ export default ({ mode }) => {
       AutoImport({
         dts: false,
         vueTemplate: true,
+        imports: [
+          PhosphorVuePreset()
+        ],
         resolvers: [
           PhosphorVueResolver()
         ]