Wie ersetze ich ein vorhandenes SVG-Icon durch ein eigenes?

Also habe ich diese Frage in einem Thread über die Komponente gepostet, die das „Gefällt-mir"-Symbol in einen Daumen hoch ändert. Entschuldigt bitte, dass ich das Thema wieder aufgreife, aber ich bin völlig verwirrt.

Was ich gerne tun würde, ist, ein benutzerdefiniertes „Gefällt-mir"-Symbol von hier zu verwenden – Font Awesome –, wobei die Umrisss-Version das „Nicht-gefällt"-Symbol sein soll. Ist das möglich? Da es sich um ein Pro-Symbol handelt, müsste ich es dann herunterladen, selbst erstellen und als benutzerdefiniertes Symbol oder Emoji hinzufügen und dann auf die „Gefällt-mir"-Komponente anwenden? Ich bin mir auch nicht sicher, wie man das macht.

Ich habe die Komponente „Gefällt-mir-Symbol ändern" installiert und auf einem ungenutzten Theme getestet. Sie funktioniert wie vorgesehen.

Ich vermute, dass man bei einem eigenen benutzerdefinierten Symbol die Komponente nicht gleichzeitig verwenden kann, da der Daumen hoch anscheinend alles überschreibt. Also habe ich sie entfernt und folgenden Code im Bereich „Header" unter „Benutzerdefiniertes HTML" dieses Themes hinzugefügt:

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

Im SVG-Symbol-Subset habe ich fa-pig und fal-pig hinzugefügt, aber in der Vorschau ist das „Gefällt-mir"-Symbol leer. Ich nehme an, das liegt daran, dass ich das Piggy-Symbol nicht tatsächlich installiert habe. Also habe ich das Sparschwein-Symbol probiert, das kostenlos sein soll, und dieses zum Symbol-Subset hinzugefügt – wieder ist das „Gefällt-mir"-Symbol leer.

Offensichtlich mache ich etwas falsch. Ich habe versucht, ein Asset mit dem Namen icons-sprite als SVG in dieses Test-Theme hochzuladen. Es erlaubt mir zwar, eines hochzuladen, aber ich kann nicht zwei verschiedene Uploads mit demselben Variablennamen icons-sprite benennen. In beiden Fällen ist es immer noch leer, selbst mit einem einzelnen Upload.

Ich arbeite in der IT, bin aber ein absoluter Anfänger beim Programmieren von all diesen fortgeschrittenen Backend-Dingen in Discourse.

Jede Hilfe wäre willkommen, danke.

2 „Gefällt mir“

Ich bin kein Experte für solche Dinge…

Vielleicht schau mal hier vorbei: Discourse FontAwesome Pro

4 „Gefällt mir“

Das piggy-bank-Icon sollte funktionieren, aber du musst es im SVG-Icon-Subset-Einstellung und in den JS-Override-Funktionen ohne Präfixe hinzufügen.

Die Pro-Icons sind nicht im Core enthalten. Für das nur für Pro verfügbare pig-Icon kannst du das von Jay oben vorgeschlagene Plugin verwenden oder eine eigene Sprite-Datei erstellen. Achte darauf, die im Eröffnungspost verlinkte Beispiel-SVG-Sprite-Datei zu prüfen. Die Sprite muss eine bestimmte Struktur mit Symbolen und IDs aufweisen (und diese ID ist es, die du in den JS-API-Aufrufen verwendest).

5 „Gefällt mir“

Also habe ich es erneut versucht und das ‘Sparschwein’-Symbol in die SVG-Symbol-Teilmenge aufgenommen. Ich habe den JavaScript-Code erneut in den Header eingefügt und auf ‘Piggy-Bank’ verwiesen – und es funktionierte endlich richtig! Danke! Das einzige Problem mit diesem speziellen Symbol ist nun, dass sowohl gelikte als auch nicht gelikte Beiträge genau gleich aussehen; es gibt keine konturierte Version für nicht gelikte Beiträge. Als ich die Font Awesome-Website erneut öffnete, fiel mir auf, dass die konturierten Versionen des Symbols PRO sind. Damit ist diese Idee erledigt. Ich werde nicht bereit sein, hundert pro Jahr für ein einziges Symbol auszugeben, wir sind eine gemeinnützige Organisation und erheben keine Mitgliedsgebühren.

Also bin ich wohl wieder dabei, mein eigenes Symbol zu erstellen. Ich werde mir die Anleitungen erneut ansehen.

3 „Gefällt mir“

Hast du beide hinzugefügt? (Ich habe nicht das gemacht, was du tust, daher könnte das auch nicht helfen.) Es gibt eine Theme-Komponente, die ein Daumen-hoch-Symbol erstellt. Vielleicht solltest du diese prüfen, um sicherzustellen, dass du alles hinzufügst, was nötig ist, um das „Gefällt mir"-Symbol zu ändern. (Oder vielleicht funktioniert dieses Symbol einfach nicht.)

2 „Gefällt mir“

Ok, also ich habe einige Dinge ausprobiert, um meine eigenen zu erstellen. Leider führt der Link, um ein Beispiel dafür zu sehen, wie die SVG-Sprite-Datei im Originalbeitrag (OP) formatiert sein sollte, nur zu einer leeren Seite; sie lädt nicht. Also habe ich es einfach versucht. Ich habe beide SVGs in Illustrator erstellt, exportiert und dann in Chrome geworfen, um mit „Element untersuchen" die Pfadinformationen zu erhalten.

Ich arbeite auf einem Mac, also habe ich TextEdit geöffnet und die Informationen hineinkopiert, die meiner Meinung nach in der Sprite-Datei stehen sollten. Dann habe ich die Erweiterung in .svg geändert. Ich habe sie im Theme hochgeladen und den JS-Code in den Header eingefügt.

Auch hier bin ich mir nicht sicher, ob irgendetwas davon richtig ist, und ich bin mir ziemlich sicher, dass es nicht stimmt, da der Vorschau-Modus des Themes die gesamte Seite zum Absturz bringt. Ich erhalte den Fehler „Ooops – Die Software, die dieses Diskussionsforum betreibt, ist auf ein unerwartetes Problem gestoßen." Nachdem ich die hochgeladene Icons-Sprite.svg entfernt habe und ein wenig gewartet habe, lädt die Seite wieder korrekt.

Nachfolgend sind die SVG-Informationen aus der Datei und der JSON-Code.

Danke!

Hier ist die Sprite-Datei auf Google Drive, falls jemand Lust hat, einen Blick darauf zu werfen: Drive

Und der Code –

2 „Gefällt mir“

Du solltest icons-sprite nicht zweimal hinzufügen.

Könntest du die SVG-Pfade in einem Code-Block posten? Ich vermute, du stößt bei der Erstellung eines Sprites mit den Icons auf Probleme. Ich kann dir dabei helfen.

6 „Gefällt mir“

Danke! Ist das das, wonach Sie suchen?

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

  <!-- ViewBox und Polygon übernommen aus "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 und Polygon übernommen aus "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 „Gefällt mir“

Discourse Gifs stellt ein benutzerdefiniertes GIF-Symbol bereit, das du als Vorlage verwenden kannst:

8 „Gefällt mir“

Ok, versuche es damit: Dropbox

Ich habe nur den replaceIcon-Aufruf für d-liked hinzugefügt. Du musst die Komponente in deiner Instanz bearbeiten und die anderen Zeilen hinzufügen. Achte darauf, dass du die IDs aus der SVG-Datei verwendest; aktuell lauten sie einfach SVGpig und SVGpigout.

10 „Gefällt mir“

Toll! Vielen Dank, das hat funktioniert, ich habe es zum Laufen gebracht. Meine Community schätzt das sehr. Vielen Dank!!

8 „Gefällt mir“

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