Come sostituire un'icona SVG esistente con una personalizzata?

Sviluppatore
1

Quindi ho pubblicato questa domanda in una discussione riguardante il componente che cambia l’icona del “Mi piace” in un pollice alzato. Scusa se riapro questo argomento, ma sono completamente confuso.

Vorrei utilizzare un’icona personalizzata per il “Mi piace” presa da qui - Font Awesome, con la versione contornata come icona per lo stato “Non mi piace”. È possibile? Dato che si tratta di un’icona Pro, dovrei scaricarla, crearne una mia e aggiungerla come icona o emoji personalizzata per poi applicarla al componente del “Mi piace”? Non sono sicuro nemmeno di come fare questo.
Ho installato il componente “Cambia icona Mi piace” e l’ho testato su un tema non utilizzato: funziona come previsto.

Immagino che, se si vuole usare un’icona personalizzata, non si possa usare contemporaneamente il componente, dato che sembra che il pollice alzato sovrasciva tutto. Quindi l’ho rimosso e ho aggiunto questo codice nell’area Header, nel blocco HTML personalizzato di quel tema:

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');

Nel sottoinsieme di icone SVG ho aggiunto fa-pig e fal-pig, ma in anteprima l’icona del “Mi piace” risulta vuota. Immagino sia perché non ho effettivamente installato l’icona del maiale. Quindi ho provato con l’icona del salvadanaio, che dovrebbe essere gratuita, l’ho aggiunta al sottoinsieme di icone, ma anche in quel caso l’icona del “Mi piace” rimane vuota.

Ovviamente sto sbagliando qualcosa. Ho provato a caricare una risorsa su questo tema di test con il nome icons-sprite come file SVG: mi ha permesso di caricarne uno, ma non posso caricarne due diversi con lo stesso nome variabile icons-sprite. In ogni caso, rimane vuoto anche con un solo caricamento.

Lavoro nell’IT, ma sono un principiante assoluto quando si tratta di programmare queste cose avanzate nel backend di Discourse.

Qualsiasi aiuto sarebbe apprezzato, grazie.

2 Mi Piace
2

Non sono un esperto di queste cose…

Forse prova a vedere Discourse FontAwesome Pro

4 Mi Piace
3

L’icona piggy-bank dovrebbe funzionare, ma devi aggiungerla senza prefissi nelle impostazioni del sito per la sottoinsieme di icone SVG e nelle funzioni di sovrascrittura JS.

Le icone Pro non sono incluse nel core, quindi per l’icona pig riservata solo agli utenti Pro, puoi utilizzare il plugin suggerito da Jay sopra, oppure creare il tuo sprite. Assicurati di consultare il file di esempio dello sprite SVG collegato nell’OP: lo sprite deve avere una struttura specifica con simboli e ID (e l’ID è ciò che utilizzi nelle chiamate all’API JS).

5 Mi Piace
4

Quindi ho riprovato e aggiunto l’icona “piggy-bank” al sottoinsieme di icone SVG. Ho reinserito il JS nell’Header e ho fatto riferimento a “Piggy-Bank”, e finalmente ha funzionato correttamente! Grazie! Ora l’unico problema con quell’icona specifica è che i post con “mi piace” e quelli senza appaiono esattamente uguali; non esiste una versione contornata per i post senza “mi piace”. Riprendendo a visitare il sito Font Awesome, ho notato che le versioni contornate dell’icona sono PRO. Quindi questa idea salta. Non ho intenzione di spendere cento dollari l’anno per una sola icona; siamo un’organizzazione no-profit e non chiediamo quote di iscrizione.

Quindi suppongo che sia tornato il momento di creare la mia icona. Controllerò di nuovo quelle istruzioni.

3 Mi Piace
5

Hai aggiunto entrambi? (Io non ho fatto quello che stai facendo tu, quindi anche questo potrebbe non essere d’aiuto). C’è un componente del tema che rende l’azione come un “pollice in su”, quindi potresti controllarlo per verificare di aver aggiunto tutto il necessario per modificare l’apprezzamento (o forse quell’icona semplicemente non può funzionare).

2 Mi Piace
6

Ok, ho provato alcune cose per crearne uno mio. Purtroppo, il link per vedere un esempio di come dovrebbe essere formattato il file SVG Sprites nel post originale mostra solo una pagina vuota e non si carica. Quindi ho proceduto a tentativi. Ho creato entrambi gli SVG in Illustrator, li ho esportati e poi li ho aperti su Chrome per fare “Ispeziona elemento” e ottenere le informazioni sui percorsi.

Sono su Mac, quindi ho aperto TextEdit e incollato lì le informazioni che penso dovrebbero essere nel file Sprite. Poi ho cambiato l’estensione in .svg. L’ho caricato sul tema e ho aggiunto il codice JS nell’Header.

Ancora non sono sicuro che tutto questo sia corretto e sono praticamente certo che non lo sia, dato che quando provo in anteprima il tema del sito, questo si blocca completamente. Ricevo l’errore “Ooops”: “Il software che alimenta questo forum di discussione ha incontrato un problema imprevisto”. Dopo aver rimosso il file SVG Sprite caricato e aspettato un po’, il sito torna a caricarsi correttamente.

Di seguito trovi le informazioni SVG contenute nel file e il codice JSON.

Grazie!

Ecco il file Sprite su Google Drive, se qualcuno volesse dare un’occhiata - Drive

E il codice -

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 Mi Piace
7

Non dovresti aggiungere icons-sprite due volte.

Puoi pubblicare i percorsi SVG in un blocco di codice? Credo che tu stia riscontrando problemi nell’inserire le icone in uno sprite; posso aiutarti con questo.

6 Mi Piace
8

Grazie! È questo che stai cercando?

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

  <!-- ViewBox e Polygon tratti da "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 e Polygon tratti da "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 Mi Piace
9

Discourse Gifs include un’icona GIF personalizzata che puoi utilizzare come esempio:

8 Mi Piace
10

Ok, prova a usare questo: Dropbox

Ho aggiunto solo la chiamata replaceIcon per d-liked; dovrai modificare il componente nella tua istanza e aggiungere le altre righe. Assicurati di utilizzare gli ID presenti nel file SVG: al momento sono semplicemente SVGpig e SVGpigout.

10 Mi Piace
11

Fantastico! Grazie, ha funzionato, l’ho messo in funzione. La mia comunità lo apprezza. Grazie mille!!

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 Mi Piace
12

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