feat!: ✨ utilise iconify au lieu de oh-vue-icons

BREAKING CHANGE: Les icônes sont désormais chargées via Iconify. Cf. documentation.

Author: laruiss

.storybook/preview.ts

@@ -4,7 +4,7 @@ import { themes } from '@storybook/theming'
 import { withThemeByDataAttribute } from '@storybook/addon-styling'
 import { FocusTrap } from 'focus-trap-vue'
 import { defineComponent } from 'vue'
-import { OhVueIcon as VIcon } from 'oh-vue-icons'
+import VIcon from '../src/components/VIcon/VIcon.vue'
 
 import VueDsfrTheme from './vue-dsfr-theme.js'
 import '../src/assets/variables-fdr.css'

.vitepress/config.ts

@@ -62,6 +62,10 @@ const guideItems = [
     text: 'Les icônes',
     link: '/guide/icones.md',
   },
+  {
+    text: 'Migrations',
+    link: '/guide/migrations.md',
+  },
   {
     text: 'Guide du développeur',
     link: '/guide/guide-developpeur.md',
@@ -271,6 +275,10 @@ const composants = [
     text: 'DsfrTooltip',
     link: '/composants/DsfrTooltip.md',
   },
+  {
+    text: 'VIcon',
+    link: '/composants/VIcon.md',
+  },
 ]
 
 // https://vitepress.dev/reference/site-config

.vitepress/theme/VIconLink.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { OhVueIcon as VIcon } from 'oh-vue-icons'
+import type VIcon from '../../src/components/VIcon.vue'
 
 withDefaults(defineProps<{
   href: string

.vitepress/theme/icons.ts

@@ -1,19 +1,16 @@
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
-import { OhVueIcon as VIcon, addIcons } from 'oh-vue-icons'
 import { RouterLink } from 'vue-router'
 
 import Story from './Story.vue'
 import AppColors from './AppColors.vue'
 import AppIcons from './AppIcons.vue'
 import VIconLink from './VIconLink.vue'
-import * as vpIcons from './icons'
 
 import './official-icons.css'
 import '@gouvfr/dsfr/dist/utility/icons/icons.main.css'
 import './style.css'
-
-addIcons(...Object.values(vpIcons))
+import VIcon from '../../src/components/VIcon/VIcon.vue'
 
 export default {
   extends: DefaultTheme,

.vitepress/theme/index.ts

@@ -5,7 +5,6 @@
     // Language support for Vue 3
     // https://github.com/johnsoncodehk/volar
     "vue.volar",
-    "vue.vscode-typescript-vue-plugin",
 
     // Language support for PostCSS
     // https://github.com/csstools/postcss-language

.vscode/extensions.json

@@ -1,11 +1,6 @@
+import { Icon } from '@iconify/vue'
 import { createApp } from 'vue'
 
-import {
-  RiCheckboxCircleLine,
-  RiNotification3Line,
-  RiGithubFill,
-} from 'oh-vue-icons/icons'
-
 import '@gouvfr/dsfr/dist/core/core.main.min.css'
 import '@gouvfr/dsfr/dist/scheme/scheme.min.css'
 import '@gouvfr/dsfr/dist/component/component.main.min.css'
@@ -19,7 +14,8 @@ import App from './App.vue'
 
 createApp(App)
   .use(router)
-  .use(VueDsfr, { icons: [RiCheckboxCircleLine, RiNotification3Line, RiGithubFill] })
+  .component('Icon', Icon)
+  .use(VueDsfr)
   .mount('#app')
 
 window.dsfr = {

demo-app/main.js

@@ -1,3 +1,30 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import MyIcon from '../../src/components/VIcon.vue'
+
+const title = ref('SVG À propos')
+setTimeout(() => {
+  title.value = 'SVG À propos (updated)'
+}, 2000)
+</script>
+
 <template>
   À propos
+  <MyIcon
+    name="ri-checkbox-circle-line"
+    :scale="2"
+    animation="float"
+    label="icon label"
+    :title="title"
+  />
+  Prout
+  <VIcon
+    name="ri-checkbox-circle-line"
+    scale="2"
+    animation="float"
+    label="icon label"
+    title="icon title"
+  />
+  Prout
 </template>

demo-app/views/AboutUs.vue

@@ -7,16 +7,11 @@ layout: false
 <script setup lang="ts">
 import { useStyleTag } from '@vueuse/core'
 import { onMounted, ref } from 'vue'
-import { OhVueIcon as VIcon, addIcons } from 'oh-vue-icons'
 import { createApp } from 'whyframe:app'
 
 import dsfrStyles from '@gouvfr/dsfr/dist/dsfr.min.css?inline'
 import dsfrIcons from '@gouvfr/dsfr/dist/utility/icons/icons.min.css?inline'
 
-import * as icons from '../src/icons'
-
-addIcons(...Object.values(icons))
-
 useStyleTag(dsfrStyles, { id: 'dsfr' })
 useStyleTag(dsfrIcons, { id: 'dsfr-icons' })
 

docs/_frame.md

@@ -5,19 +5,21 @@ import DsfrButton from '../../src/components/DsfrButton/DsfrButton.vue'
 <template>
   <div class="fr-p-2w  flex gap-4  flex-wrap">
     <DsfrButton icon="fr-icon-close-line">
-      Texte avec icône Dsfr
+      Texte avec icône Dsfr (commence par <code>'fr-'</code>)
     </DsfrButton>
 
     <DsfrButton icon="ri-close-line">
-      Texte avec icône OhVueIcon
+      Texte avec icône @iconify/vue
     </DsfrButton>
 
     <DsfrButton
-      :icon="{ name: 'ri-close-line', fill: 'purple' }"
+      :icon="{ name: 'ri-close-line', color: 'green', animation: 'flash' }"
       secondary
     >
       Texte avec icône
-      OhVueIcon violette
+      <code>@iconify/vue</code>
+      <span style="color: green"> verte </span>
+      avec animation 'flash'
     </DsfrButton>
   </div>
 </template>