¿Cómo reemplazar un ícono SVG existente por uno personalizado?

Desarrollador
1

Así que publiqué esta pregunta en un hilo sobre el componente que cambia el ícono de “Me gusta” a un pulgar hacia arriba. Perdón por revivir este tema de nuevo, pero estoy totalmente confundido.

Lo que me gustaría hacer es usar un ícono personalizado de “Me gusta” desde aquí: Font Awesome, utilizando la versión de contorno como el ícono de “No me gusta”. ¿Es eso posible? Dado que es un ícono Pro, ¿tendría que descargarlo, crear mi propio ícono o emoji personalizado y luego aplicarlo al componente de “Me gusta”? Tampoco estoy seguro de cómo hacer eso.

Tengo instalado el componente “Cambiar ícono de Me gusta” y lo probé en un tema sin usar, y funciona como se espera.

Supongo que si quieres tener tu propio ícono personalizado, no puedes usar el componente al mismo tiempo, ya que parece que el pulgar hacia arriba anula todo. Así que lo eliminé y agregué este código al área de Encabezado en el HTML personalizado de ese 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');

En el subconjunto de íconos SVG agregué fa-pig y fal-pig, pero al previsualizarlo, el ícono de “Me gusta” aparece en blanco. Supongo que es porque en realidad no tengo instalado el ícono de cerdito. Así que probé con el ícono de hucha, que debería ser gratuito, lo agregué al subconjunto de íconos y, de nuevo, el ícono de “Me gusta” aparece en blanco.

Obviamente, estoy haciendo algo mal. Intenté subir un recurso a este tema de prueba con el nombre icons-sprite como un SVG; me permitió subir uno, pero no puedo nombrar dos subidas diferentes con el mismo nombre de variable icons-sprite. De cualquier manera, sigue apareciendo en blanco incluso con una sola subida.

Trabajo en TI, pero soy un principiante absoluto en la programación de todo esto, especialmente en la parte avanzada del backend de Discourse.

Agradezco cualquier ayuda. ¡Gracias!

2

No soy experto en eso…

Quizás vea Discourse FontAwesome Pro

3

El icono piggy-bank debería funcionar, pero debes agregarlo sin ningún prefijo en la configuración del sitio del subconjunto de iconos SVG y en las funciones de anulación de JS.

Los iconos Pro no están incluidos en el núcleo, por lo que para el icono exclusivo de Pro pig, puedes usar el plugin sugerido por Jay anteriormente o crear tu propio sprite. Asegúrate de revisar el archivo de sprite SVG de ejemplo enlazado en la publicación original; el sprite necesita una estructura específica con símbolos e identificadores (y luego el identificador es lo que se usa en las llamadas a la API de JS).

4

Así que lo intenté de nuevo y añadí el icono ‘piggy-bank’ al subconjunto de iconos SVG. Volví a agregar el JS en el encabezado y referencié ‘Piggy-Bank’, y finalmente funcionó correctamente. ¡Gracias! Ahora el único problema con ese icono en particular es que tanto las publicaciones con ‘me gusta’ como las que no tienen ‘me gusta’ se ven exactamente iguales; no hay una versión con contorno para las publicaciones sin ‘me gusta’. Al volver a cargar el sitio de Font Awesome, noté que las versiones con contorno del icono son PRO. Así que esa idea queda descartada. No pienso gastar cien dólares al año por un solo icono; somos una organización sin fines de lucro y no cobramos por la membresía.

Así que supongo que vuelvo a crear mi propio icono. Revisaré esas instrucciones de nuevo.

5

¿Añadiste ambos? (No he hecho lo que tú estás haciendo, así que esto también podría no ayudar). Hay un componente del tema que hace algo como un pulgar hacia arriba, así que podrías revisarlo para asegurarte de que estás añadiendo todo lo necesario para cambiar el «me gusta» (o tal vez ese icono simplemente no puede funcionar).

6

Ok, así que he probado algunas cosas para crear el mío propio. Desafortunadamente, el enlace para ver un ejemplo de cómo debe estar formateado el archivo de SVG Sprites en el OP es solo una página en blanco, no carga. Así que improvisé. Creé ambos SVGs en Illustrator, los exporté y luego los lancé en Chrome para ‘Inspeccionar elemento’ y obtener la información del archivo Path.

Estoy en un Mac, así que abrí TextEdit y copié la información allí que creo que debería estar en el archivo Sprite. Luego cambié la extensión a svg. Lo subí al tema y agregué el código JS en el Encabezado.

De nuevo, no estoy seguro de si algo de esto es correcto y estoy bastante seguro de que no lo es, ya que cuando previsualizo el tema del sitio, este se bloquea completamente. Recibo el error Ooops: “El software que impulsa este foro de discusión encontró un problema inesperado”. Después de eliminar los iconos-Sprite svg que se subieron y esperar un momento, el sitio vuelve a cargar correctamente.

A continuación está la información svg en el archivo y el código json.

¡Gracias!

Aquí está el archivo Sprite en Google Drive si alguien quiere echar un vistazo - Drive

Y el código -

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

7

No debes agregar icons-sprite dos veces.

¿Puedes publicar las rutas SVG en un bloque de código? Creo que estás teniendo problemas al colocar los iconos en un sprite, puedo ayudarte con eso.

8

¡Gracias! ¿Es esto lo que estás buscando?

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

  <!-- ViewBox y Polygon tomados 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 y Polygon tomados 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>
9

Discourse Gifs incluye un icono GIF personalizado que puedes utilizar como ejemplo:

10

Ok, intenta usar esto: Dropbox

Solo agregué la llamada replaceIcon para d-liked; tendrás que editar el componente en tu instancia y agregar las otras líneas. Asegúrate de usar los IDs del archivo SVG; ahora son simplemente SVGpig y SVGpigout.

11

¡Genial! Gracias, funcionó, lo puse en marcha. Mi comunidad lo agradece. ¡Muchas gracias!!

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