Comment remplacer une icône SVG existante par une icône personnalisée ?

Dev
1

Donc, j’ai posté cette question dans un fil de discussion concernant le composant qui remplace l’icône J’aime par un pouce levé. Désolé de raviver ce sujet, mais je suis totalement perdu.

Ce que je souhaiterais faire, c’est utiliser une icône J’aime personnalisée provenant de Font Awesome, avec la version contour servant d’icône pour l’état « non aimé ». Est-ce possible ? Puisqu’il s’agit d’une icône Pro, devrais-je la télécharger, ou en créer une moi-même pour l’ajouter en tant qu’icône ou emoji personnalisé, puis l’appliquer au composant J’aime ? Je ne sais pas non plus comment faire cela.

J’ai installé le composant « Changer l’icône J’aime » et je l’ai testé sur un thème inutilisé ; il fonctionne comme prévu.

Je suppose que pour utiliser votre propre icône personnalisée, vous ne pouvez pas utiliser le composant en même temps, car il semble que le pouce levé remplace tout. J’ai donc supprimé le composant et ajouté ce code dans la zone En-tête du HTML personnalisé de ce thème :

api.replaceIcon('d-liked', 'fa-pig');
api.replaceIcon('d-unliked', 'fal-pig');
api.replaceIcon('notification.liked', 'fa-pig');
api.replaceIcon('notification.liked_2', 'fa-pig');
api.replaceIcon('notification.liked_many', 'fa-pig');
api.replaceIcon('notification.liked_consolidated', 'fa-pig');      
api.replaceIcon('d-unliked', 'fal-pig');
api.replaceIcon('notification.liked', 'fa-pig');
api.replaceIcon('notification.liked_2', 'fa-pig');
api.replaceIcon('notification.liked_many', 'fa-pig');
api.replaceIcon('notification.liked_consolidated', 'fa-pig');      
api.replaceIcon('heart', 'fa-pig');

Dans le sous-ensemble d’icônes SVG, j’ai ajouté fa-pig et fal-pig, mais lors de l’aperçu, l’icône J’aime est vide. Je suppose que c’est parce que je n’ai pas réellement installé l’icône Pig. J’ai donc essayé l’icône tirelire, qui est censée être gratuite, et je l’ai ajoutée au sous-ensemble d’icônes ; là encore, l’icône J’aime est vide.

Évidemment, je fais quelque chose de mal. J’ai essayé de télécharger une ressource (Asset) sur ce thème de test avec le nom icons-sprite en tant que SVG. Le système me permet d’en télécharger une, mais je ne peux pas nommer deux téléchargements différents avec le même nom de variable icons-sprite. Dans les deux cas, l’icône reste vide, même avec un seul téléchargement.

Je travaille dans les TI, mais je suis un grand débutant en programmation, surtout pour tout ce qui concerne l’infrastructure avancée de Discourse.

Toute aide serait appréciée, merci.

2 « J'aime »
2

Je ne suis pas expert dans ce domaine…

Vous pourriez consulter Discourse FontAwesome Pro

4 « J'aime »
3

L’icône piggy-bank devrait fonctionner, mais vous devez l’ajouter sans aucun préfixe dans le paramètre du site « sous-ensemble d’icônes SVG » et dans les fonctions de substitution JS.

Les icônes Pro ne sont pas incluses dans le noyau ; donc, pour l’icône pig réservée aux utilisateurs Pro, vous pouvez utiliser le plugin suggéré par Jay ci-dessus, ou créer votre propre sprite. Assurez-vous d’examiner le fichier de sprite SVG exemple lié dans le message d’origine (OP) ; le sprite doit avoir une structure spécifique avec des symboles et des identifiants (et c’est ensuite l’identifiant que vous utilisez dans les appels à l’API JS).

5 « J'aime »
4

J’ai donc réessayé et ajouté l’icône « tirelire » au sous-ensemble d’icônes SVG. J’ai à nouveau intégré le JavaScript dans l’en-tête et fait référence à « Piggy-Bank », et cela a enfin fonctionné correctement ! Merci ! Maintenant, le seul problème avec cette icône particulière est que les publications aimées et celles non aimées se ressemblent exactement ; il n’existe pas de version contour pour les publications non aimées. En rechargeant le site Font Awesome, j’ai remarqué que les versions contour de l’icône sont réservées aux utilisateurs PRO. Cela tue donc cette idée. Je ne vais pas dépenser cent dollars par an pour une seule icône ; nous sommes une organisation à but non lucratif et nous ne facturons pas l’adhésion.

Donc, je suppose que je reviens à la création de ma propre icône. Je vais revoir ces instructions à nouveau.

3 « J'aime »
5

Avez-vous ajouté les deux ? (Je n’ai pas fait ce que vous faites, donc cela pourrait aussi ne pas aider). Il existe un composant de thème qui crée un pouce vers le haut, vous pourriez donc le vérifier pour voir si vous ajoutez tout ce qui est nécessaire pour modifier l’effet de « j’aime ». (ou peut-être que cette icône ne peut tout simplement pas fonctionner).

2 « J'aime »
6

D’accord, j’ai donc essayé plusieurs choses pour créer le mien. Malheureusement, le lien vers un exemple de la manière dont le fichier SVG Sprites devrait être formaté dans le message original (OP) affiche simplement une page blanche et ne se charge pas. Alors, j’ai improvisé. J’ai créé mes deux SVG dans Illustrator, les ai exportés, puis les ai ouverts dans Chrome pour « Inspecter l’élément » afin d’obtenir les informations du fichier Path.

Je suis sur Mac, donc j’ai ouvert TextEdit et j’ai copié les informations que je pense devoir figurer dans le fichier Sprite. Ensuite, j’ai changé l’extension en .svg. Je l’ai téléchargé sur le thème et ajouté le code JS dans l’en-tête.

Je ne suis toujours pas sûr que tout cela soit correct et je suis presque certain que ce n’est pas le cas, car lorsque j’aperçois le thème du site, il se fige complètement. J’obtiens l’erreur « Oups » : « Le logiciel alimentant ce forum de discussion a rencontré un problème inattendu. » Après avoir supprimé le fichier Sprite SVG des icônes que j’avais téléchargé et attendu un peu, le site se charge à nouveau correctement.

Voici les informations SVG du fichier et le code JSON ci-dessous.

Merci !

Voici le fichier Sprite sur Google Drive, au cas où quelqu’un souhaiterait jeter un coup d’œil : Drive

Et le code :

Screen Shot 2021-03-19 at 4.32.51 PM
Screen Shot 2021-03-19 at 4.32.51 PM499×408 30.8 KB

2 « J'aime »
7

Vous ne devriez pas ajouter icons-sprite deux fois.

Pouvez-vous poster les chemins SVG dans un bloc de code ? Je pense que vous rencontrez des problèmes lors de la mise des icônes dans un sprite, je peux vous aider avec cela.

6 « J'aime »
8

Merci ! Est-ce ce que vous recherchez ?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- ViewBox et Polygon extraits de "SVGpig.svg" -->
  <symbol id="ids-SVGpig" width="616px" height="425px" viewBox="0 0 616 425">
    <path xmlns="http://www.w3.org/2000/svg" fill="#060709" d="M184.131,400.155c2.827,0.205,3.614-5.244,7.953-7.232c4.652-7.228,0,0,7.627-10.233    c-0.112,0.04,6.764-6.983,6.651-6.942c6.519-17.718,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456    c2.529-0.931,3.49,2.748,4.203,4.525c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-6.405,14.642-5.161,22.4    c4.807-0.332,19.038,0.231,23.851,0.298c2.355-7.332,1.213-5.049,4.524-12.042c0.322-0.68,4.927-10.54,5.377-10.93    c4.667-11.476,9.501-22.896,14.743-34.119c5.729,11.479,7.265,24.374,9.339,36.882c-0.092,0.01-0.183,0.021-0.275,0.03    c3.219,10.044-1.754,20.419-0.559,30.879c8.474,0.214,23.744-0.615,32.184-1.483c0.118-3-0.39-5.761-0.319-8.759    c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449    c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499    c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354    c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453    c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92    c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784    c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907    C62.018,74.314,54.998,90.515,40,97.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033    c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159    c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658    c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755    c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,18.703-53.914,20.5-60.062    c0.033,6.355-15.454,62.01-17,68 M77.21,126.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624    C86.532,113.189,82.366,121.266,77.21,126.644z"/>
  </symbol>

  <!-- ViewBox et Polygon extraits de "SVGpigout.svg" -->
  <symbol id="ids-SVGpigout"  width="621px" height="430px" viewBox="0 0 621 430">
    <path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#060709" stroke-width="8" stroke-miterlimit="10.43" d="M167.5,399.499L194,405    c2.827,0.205,1.084-10.077,1.084-10.077s0,0,7.627-10.233c-0.112,0.04,6.651-6.942,6.651-6.942    c8.885-18.201,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456c2.529-0.931,3.49,2.748,4.203,4.525    c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-5.405,17.642-4.161,25.4c4.807-0.332,17.453-2.001,22.266-1.935    c2.355-7.332,1.798-5.816,5.109-12.81c0.322-0.68,4.927-10.54,5.377-10.93c4.667-11.476,14.743-34.119,14.743-34.119l9.339,36.882    l-0.275,0.03c0,0,0.246,20.419,1.441,30.879c8.474,0.214,21.744-0.615,30.184-1.483c0.118-3-0.39-5.761-0.319-8.759    c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449    c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499    c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354    c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453    c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92    c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784    c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907    C65.018,76.314,57.998,92.515,43,99.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033    c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159    c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658    c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755    c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,12.203-34.414,14-40.562    c0.033,6.355-14,46.666-7,49.999 M80.21,128.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624    C89.532,115.189,85.366,123.266,80.21,128.644z"/>
  </symbol>


</svg>
2 « J'aime »
9

Discourse Gifs fournit une icône GIF personnalisée que vous pouvez utiliser comme exemple :

8 « J'aime »
10

Ok, essayez d’utiliser ceci : Dropbox

J’ai uniquement ajouté l’appel replaceIcon pour d-liked, vous devrez modifier le composant dans votre instance et ajouter les autres lignes. Assurez-vous d’utiliser les IDs du fichier svg, actuellement ils sont simplement SVGpig et SVGpigout.

10 « J'aime »
11

Super ! Merci, cela a fonctionné, je l’ai mis en place et il est opérationnel. Ma communauté l’apprécie. Merci beaucoup !!

Screen Shot 2021-03-25 at 12.29.27 PM
Screen Shot 2021-03-25 at 12.29.27 PM304×121 5.13 KB

8 « J'aime »
12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.