Как заменить существующую SVG-иконку на пользовательскую?

Разработка
1

Итак, я задал этот вопрос в теме, посвящённой компоненту, который меняет иконку «Нравится» на большой палец вверх. Извините, что снова поднимаю эту тему, но я совершенно запутался.

Я хотел бы использовать пользовательскую иконку «Нравится» отсюда — Font Awesome, причём контурная версия должна быть иконкой «Не нравится». Возможно ли это? Поскольку это Pro-иконка, мне нужно будет её скачать, создать свою или добавить как пользовательскую иконку или эмодзи, а затем применить к компоненту «Нравится»? Я также не уверен, как это сделать.

У меня установлен компонент «Изменить иконку «Нравится»», я протестировал его на неиспользуемой теме, и он работает как задумано.

Я предполагаю, что если вы хотите использовать собственную пользовательскую иконку, то нельзя одновременно использовать этот компонент, так как, похоже, большой палец вверх переопределяет всё. Поэтому я удалил его и добавил этот код в область «Header» в разделе «Custom HTML» указанной темы:

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

В наборе SVG-икон я добавил fa-pig и fal-pig, но при предпросмотре иконка «Нравится» отображается пустой. Я предполагаю, что это потому, что у меня на самом деле не установлена иконка Pig. Тогда я попробовал иконку копилки (piggy-bank), которая, как утверждается, бесплатная, и добавил её в набор иконок — снова иконка «Нравится» пустая.

Очевидно, я что-то делаю не так. Я попробовал загрузить ресурс в эту тестовую тему с именем icons-sprite в формате SVG; система позволила мне загрузить один файл, но я не могу назвать две разные загрузки одинаковым именем переменной Icons-sprite. В любом случае иконка остаётся пустой, даже с одной загрузкой.

Я работаю в IT, но я полный новичок в программировании и во всём этом продвинутом бэкенде Discourse.

Любая помощь будет очень кстати, спасибо.

2

Я не эксперт в этом…

Возможно, посмотрите Discourse FontAwesome Pro

3

Иконка piggy-bank должна работать, но её нужно добавить без каких-либо префиксов в настройке подмножества SVG-икон на сайте и в функциях переопределения JS.

Pro-иконки не включены в ядро, поэтому для иконки pig, доступной только в Pro, вы можете использовать плагин, предложенный Джейом выше, или создать свой собственный спрайт. Обязательно ознакомьтесь с примером файла SVG-спрайта, на который есть ссылка в первом сообщении темы: спрайт должен иметь определённую структуру с символами и идентификаторами (а именно идентификатор используется в вызовах JS API).

4

Итак, я попробовал снова и добавил иконку «копилка» в подмножество SVG-иконок. Я снова добавил JS в заголовок и сослался на «Piggy-Bank», и всё наконец заработало как надо! Спасибо! Теперь единственная проблема с этой конкретной иконкой заключается в том, что и лайкнутые, и не лайкнутые посты выглядят абсолютно одинаково — нет контурной версии для не лайкнутых постов. Когда я снова зашёл на сайт Font Awesome, то заметил, что контурные версии иконки доступны только в PRO-версии. Так что эта идея отпадает. Я не собираюсь тратить сто долларов в год ради одной иконки, мы некоммерческая организация и не взимаем плату за членство.

Так что, похоже, мне снова придётся создавать свою собственную иконку. Я ещё раз изучу эти инструкции.

5

Вы добавили оба варианта? (Я не делал того, что делаете вы, поэтому это тоже может не помочь). Существует компонент темы, который отображает значок «большой палец вверх», так что вы можете проверить его, чтобы убедиться, что добавляете всё необходимое для изменения иконки лайка. (Или, возможно, этот значок просто не может работать).

6

Хорошо, я попробовал несколько вариантов, чтобы создать свой собственный. К сожалению, ссылка в первом посте (OP) на пример того, как должен быть отформатирован файл SVG-спрайтов, ведет на пустую страницу — она не загружается. Поэтому я действовал наугад.

Я создал оба SVG-файла в Illustrator, экспортировал их, а затем загрузил в Chrome, чтобы через «Исследовать элемент» получить информацию о путях (Path).

Я работаю на Mac, поэтому открыл TextEdit и вставил туда информацию, которая, как я полагаю, должна находиться в файле спрайта. Затем изменил расширение файла на .svg. Загрузил его в тему и добавил JS-код в заголовок (Header).

Снова не уверен, что всё сделано правильно, и почти уверен, что нет, так как при предпросмотре темы для сайта он полностью падает. Появляется ошибка «Ой»: «Программное обеспечение, управляющее этим форумом, столкнулось с неожиданной проблемой». После того как я удаляю загруженный файл иконки-спрайта и немного жду, сайт снова загружается корректно.

Ниже приведена информация из SVG-файла и код JSON.

Спасибо!

Вот файл спрайта на Google Диске, если кому интересно посмотреть — Drive

А вот код —

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

Не стоит добавлять icons-sprite дважды.

Можете ли вы разместить SVG-пути в блоке кода? Похоже, у вас возникают проблемы с помещением иконок в спрайт, я могу помочь с этим.

8

Спасибо! Это то, что вы искали?

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

  <!-- ViewBox и Polygon взяты из файла "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 и Polygon взяты из файла "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 включает в себя пользовательскую иконку GIF, которую вы можете использовать в качестве примера:

10

Хорошо, попробуйте использовать это: Dropbox

Я добавил только вызов replaceIcon для d-liked, вам нужно отредактировать компонент в вашем экземпляре и добавить остальные строки. Убедитесь, что вы используете идентификаторы из SVG-файла, сейчас они просто SVGpig и SVGpigout.

11

Отлично! Спасибо, всё сработало, я запустил. Мое сообщество это ценит. Большое спасибо!!

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