Ajouter des icônes SVG personnalisées dans NextJS - Tutoriel

Table of Contents

1. 🌟 Introduction
2. 💻 Steps to Add Custom Icons to Your Next.js Project
   1. Step 1: Create a Folder for Icons
   2. Step 2: Find and Download the Icon
   3. Step 3: Export the Icons in the index.ts File
   4. Step 4: Install and Configure svgr-webpack
   5. Step 5: Restart the Server
   6. Step 6: Render and Style the Icon
3. 📝 Conclusion
4. 🌐 Useful Resources

🌟 Introduction

Ajouter des icônes personnalisées à votre prochain projet JS n'est pas la tâche la plus intuitive, mais je vais vous montrer comment le faire. C'est un processus en deux étapes et cela ne prend que quelques minutes à faire. Alors, examinons comment le faire et plongeons directement.

💻 Steps to Add Custom Icons to Your Next.js Project

Step 1: Create a Folder for Icons

Pour commencer, nous devons créer un nouveau dossier appelé "composants". À l'intérieur de ce dossier, nous aurons un autre dossier appelé "svgs". C'est là que nous stockerons les icônes que nous souhaitons utiliser.

Step 2: Find and Download the Icon

Avant de pouvoir rendre un icône, nous devons trouver celui que nous voulons utiliser. Vous pouvez utiliser n'importe quel site Web qui propose des icônes SVG. Pour cet exemple, nous allons utiliser un site Web et télécharger un icône SVG spécifique.

Step 3: Export the Icons in the index.ts File

Une fois que vous avez téléchargé l'icône souhaité, vous devez le copier dans le dossier "svgs". Ensuite, nous allons créer un fichier appelé "index.ts" à l'intérieur du dossier "svgs". Dans ce fichier, nous allons exporter toutes les icônes que nous avons dans ce dossier.

Step 4: Install and Configure svgr-webpack

Pour pouvoir utiliser les icônes SVG dans notre projet Next.js, nous devons ajouter une configuration personnalisée à notre fichier "next.config.js". Cette configuration utilisera un package npm appelé "svgr-webpack". Assurez-vous d'installer ce package en utilisant la commande npm appropriée.

Step 5: Restart the Server

Après avoir ajouté la configuration personnalisée et installé le package "svgr-webpack", vous devez redémarrer le serveur Next.js pour que les modifications prennent effet.

Step 6: Render and Style the Icon

Maintenant que tout est configuré, vous pouvez utiliser les icônes personnalisées dans votre front-end Next.js. Vous pouvez les afficher en important les fichiers SVG et en les rendant dans vos composants. N'oubliez pas d'appliquer des styles CSS pour personnaliser l'apparence de l'icône.

📝 Conclusion

Ajouter des icônes personnalisées à votre projet Next.js peut sembler compliqué, mais en suivant ces étapes, vous pourrez le faire facilement. Les icônes personnalisées peuvent ajouter une touche visuelle unique à votre application web.

🌐 Useful Resources

• Site Web pour télécharger des icônes SVG
• Package npm "svgr-webpack"