Migrate to astro-icon v1

astro.config.mjs

@@ -7,6 +7,7 @@ import tailwind from '@astrojs/tailwind';
 import sitemap from '@astrojs/sitemap';
 import image from '@astrojs/image';
 import mdx from '@astrojs/mdx';
+import icon from "astro-icon";
 import partytown from '@astrojs/partytown';
 import compress from 'astro-compress';
 import { readingTimeRemarkPlugin } from './src/utils/frontmatter.mjs';
@@ -40,6 +41,13 @@ export default defineConfig({
       serviceEntryPoint: '@astrojs/image/sharp',
     }),
     mdx(),
+    icon({
+      include: {
+        tabler: ["*"],
+        "flat-color-icons": ["template", "gallery", "approval", "document", "advertising", "currency-exchange", "voice-presentation", "business-contact", "database"],
+        ri: ["twitter-fill", "facebook-box-fill", "linkedin-box-fill", "whatsapp-fill", "mail-fill"],
+      },
+    }),
 
     ...whenExternalScripts(() =>
       partytown({

package.json

@@ -27,7 +27,7 @@
     "@typescript-eslint/parser": "^6.2.0",
     "astro": "^2.9.3",
     "astro-compress": "^1.1.49",
-    "astro-icon": "^0.8.1",
+    "astro-icon": "^1.0.0-next.2",
     "eslint": "^8.45.0",
     "eslint-plugin-astro": "^0.27.2",
     "eslint-plugin-jsx-a11y": "^6.7.1",
@@ -43,5 +43,10 @@
   },
   "engines": {
     "node": ">=16.12.0"
+  },
+  "dependencies": {
+    "@iconify-json/flat-color-icons": "^1.1.6",
+    "@iconify-json/ri": "^1.1.10",
+    "@iconify-json/tabler": "^1.1.85"
   }
 }

src/components/blog/ListItem.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 import { Picture } from '@astrojs/image/components';
 import PostTags from '~/components/blog/Tags.astro';
 

src/components/blog/Pagination.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 import { getPermalink } from '~/utils/permalinks';
 
 export interface Props {

src/components/blog/SinglePost.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 import { Picture } from '@astrojs/image/components';
 
 import PostTags from '~/components/blog/Tags.astro';

src/components/blog/ToBlogLink.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 import { getBlogPermalink } from '~/utils/permalinks';
 ---
 

src/components/common/SocialShare.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 
 export interface Props {
   text: string;

src/components/common/ToggleMenu.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 
 export interface Props {
   label?: string;

src/components/common/ToggleTheme.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 
 import { SITE } from '~/config.mjs';
 

src/components/widgets/CallToAction.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 
 export interface CallToAction {
   text: string;

src/components/widgets/Content.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 import { Picture } from '@astrojs/image/components';
 
 interface Item {

src/components/widgets/FAQs.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 
 interface Item {
   question: string;

src/components/widgets/Features.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 
 interface Item {
   title: string;

src/components/widgets/Features2.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 
 interface Item {
   title?: string;

src/components/widgets/Footer.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 import { SITE } from '~/config.mjs';
 import { getHomePermalink } from '~/utils/permalinks';
 

src/components/widgets/Header.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 import Logo from '~/components/Logo.astro';
 import ToggleTheme from '~/components/common/ToggleTheme.astro';
 import ToggleMenu from '~/components/common/ToggleMenu.astro';

src/components/widgets/Hero.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 import { Picture } from '@astrojs/image/components';
 import type { CallToAction } from '~/components/widgets/CallToAction.astro';
 

src/components/widgets/Hero2.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 import { Picture } from '@astrojs/image/components';
 
 import type { CallToAction } from '~/components/widgets/CallToAction.astro';

src/components/widgets/Note.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 ---
 
 <section class="bg-blue-50 dark:bg-slate-800 not-prose">

src/components/widgets/Steps.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 import { Picture } from '@astrojs/image/components';
 
 interface Item {

src/components/widgets/Steps2.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 import type { CallToAction } from '~/components/widgets/CallToAction.astro';
 
 interface Item {

src/pages/index.astro

@@ -218,7 +218,7 @@ const meta = {
         title: 'Features',
         description:
           'Display your product in action and how the Features actually create a solution for your target customer.',
-        icon: 'flat-color-icons:todo-list',
+        icon: 'flat-color-icons:approval',
       },
       {
         title: 'Content',
@@ -254,7 +254,7 @@ const meta = {
         title: 'Footers',
         description:
           'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-        icon: 'icon-park:page-template',
+        icon: 'flat-color-icons:database',
       },
     ]}
   />