Logo Cinquin Andy Signature

Comment voir les icônes disponibles dans Obsidian

Développeur Freelance - Logo

Les sites et les ressources associées

Comment voir les icônes disponibles dans Obsidian

Publié le 13 juin 2024 -  par Andy Cinquin

ObsidianLucidePluginsIcônesTutorielMéthodePas à pasUtilisation

Actuellement, Obsidian supporte Lucide, mais pas la dernière version officielle. Selon un des développeurs de chez Obsidian, "nous avons toujours quelques mois de retard". Après avoir cherché une liste à jour des icônes utilisables, voici une méthode pour voir tous les plugins et ceux qui fonctionnent.

Comment voir les icônes disponibles dans Obsidian (callout / ribbonIcon)

  1. Créez un dossier vide et nommez-le lucide-static.
  2. Installez Lucide avec la commande :
    npm i lucide-static
    
  3. Naviguez vers le répertoire node_modules -> lucide-static -> icons.
  4. Créez un fichier nommé "liste.bat" avec le contenu suivant :
@echo off
setlocal enabledelayedexpansion

REM Nom des fichiers de sortie
set OUTPUT_FILE_SIMPLE=liste_fichiers_svg.txt
set OUTPUT_FILE_SPECIAL=liste_fichiers_svg_special.txt
set OUTPUT_FILE_SPECIAL_PLUS=icons_obsidian.md

REM Supprime les fichiers de sortie s'ils existent déjà
if exist %OUTPUT_FILE_SIMPLE% del %OUTPUT_FILE_SIMPLE%
if exist %OUTPUT_FILE_SPECIAL% del %OUTPUT_FILE_SPECIAL%
if exist %OUTPUT_FILE_SPECIAL_PLUS% del %OUTPUT_FILE_SPECIAL_PLUS%

REM Ajoute l'en-tête au fichier spécial
echo ^> [!info]- Icons > %OUTPUT_FILE_SPECIAL%
echo ^> [!info]- Icons > %OUTPUT_FILE_SPECIAL_PLUS%

REM Boucle à travers tous les fichiers SVG dans le répertoire actuel
for %%f in (*.svg) do (
    echo %%f >> %OUTPUT_FILE_SIMPLE%
    REM Enlève l'extension .svg pour le fichier spécial
    set "filename=%%~nf"
    echo ^> - !filename! >> %OUTPUT_FILE_SPECIAL%
    echo ^> - !filename! >> %OUTPUT_FILE_SPECIAL_PLUS%
)

REM Ajoute le contenu supplémentaire au fichier spécial plus
(
echo.
echo ^^^```dataviewjs
echo const icons = dv.current().file.lists.map((l) ^> l.text^);
echo await dv.table(
echo ^^^[^^^"Icon^^^", ^^^"Name^^^"],
echo icons.map((l) ^> ^[^^^"^^^", l^^^]^)
echo ^);
echo dv.container.querySelectorAll("tbody tr").forEach((tr, index) ^> ^{
echo ^^^const td = tr.querySelector("td");
echo ^^^obsidian.setIcon(td, icons[index], 100);
echo ^^^}^);
echo ^^^```
) >> %OUTPUT_FILE_SPECIAL_PLUS%

echo La liste des fichiers SVG a été enregistrée dans %OUTPUT_FILE_SIMPLE%, %OUTPUT_FILE_SPECIAL% et %OUTPUT_FILE_SPECIAL_PLUS%.

endlocal
pause
  1. Sauvegardez et exécutez ce fichier.
Cela va créer trois fichiers : "liste_fichiers_svg.txt", "liste_fichiers_svg_special.txt", et "icons_obsidian.md".
Les fichiers "liste_fichiers_svg.txt" et "liste_fichiers_svg_special.txt" sont là au cas où vous en auriez besoin. Nous allons récupérer le fichier "icons_obsidian.md" et le mettre dans un vault Obsidian.
Voici à quoi ça devrait ressembler. Vous pourrez alors voir directement toutes les icônes disponibles !
Screenshot of a user interface displaying a list of line icons with textual descriptions

Merci pour votre lecture. J'ai en tête de créer un petit plugin Obsidian pour voir les icônes disponibles directement et avoir un moyen de rechercher les icônes avec une barre de recherche, etc., mais pour le moment, je laisse ça de côté ! 😄
Je vous tiendrai informé sur mon site internet si je le fais ! 😃



En vous remerciant de votre visite, n'hésitez pas à me contacter pour toute demande de renseignements, devis ou proposition de collaboration. Je me ferai un plaisir de vous répondre dans les plus brefs délais.
Vous avez aimé cet article ? N'hésitez pas à le partager !

DÉVELOPPONS ENSEMBLE VOS PROJETS

Une idée, un projet ? Je suis là pour répondre à vos demandes et vous accompagner.
N’hésitez pas, je serais ravi d’échanger avec vous sur votre projet !
© 2024 Andy Cinquin - Tous droits réservés - Developed & Designed with ❤️ 🐝 ForHives co-founders