既存のSVGアイコンをカスタムアイコンに置き換える方法

開発
1

このスレッドでは、いいねアイコンを親指を立てたアイコンに変更するコンポーネントについて質問を投稿しました。またこの話題を掘り起こすのは申し訳ありませんが、全く混乱しています。

やりたいのは、ここにあるカスタムいいねアイコンを使用することです - Font Awesome（アウトライン版を「いいね未選択」アイコンとして使用）。これは可能でしょうか？Pro アイコンなので、ダウンロードする必要がありますか？それとも自分で作成してカスタムアイコンや絵文字として追加し、その後「いいねアイコン」コンポーネントに適用する必要があるのでしょうか？その方法もわかりません。
「いいねアイコン変更」コンポーネントはインストール済みで、使っていないテーマでテストしましたが、意図通りに動作しました。

独自のカスタムアイコンを使用する場合、親指を立てたアイコンがすべてを上書きしてしまうため、コンポーネントを同時に使用できないのではないかと推測しています。そのため、それを削除し、そのテーマのカスタム 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 アイコンがインストールされていないためだと思われます。そこで、無料であるはずのピギーバンクアイコンを試してアイコンサブセットに追加しましたが、これもいいねアイコンは空白のままです。

明らかに何か間違っています。テストテーマに icons-sprite という名前で SVG アセットをアップロードしようとしましたが、1 つはアップロードできました。しかし、同じ変数名 Icons-sprite で 2 つのアップロードを行うことはできません。どちらの方法でも、1 つアップロードしただけでも空白のままです。

私は IT 部門で働いていますが、Discourse のような高度なバックエンドのプログラミングについては超初心者です。

ご助力いただければ幸いです。ありがとうございます。

「いいね！」 2
2

その手のことは詳しくないのですが…

こちらをご覧ください：Discourse FontAwesome Pro

「いいね！」 4
3

piggy-bank アイコンは機能するはずです。ただし、SVG アイコンサブセットのサイト設定と JS 上書き関数では、プレフィックスなしで追加する必要があります。

Pro アイコンはコアに含まれていません。そのため、Pro 専用の pig アイコンについては、Jay さんが上記で提案したプラグインを使用するか、独自のスプライトを作成してください。OP にリンクされているサンプル SVG スプライトファイルを参照してください。スプライトには、シンボルと ID を持つ特定の構造が必要です（そして、その ID が JS API 呼び出しで使用するものになります）。

「いいね！」 5
4

再び試して、SVG アイコンサブセットに「ピギーバンク」アイコンを追加しました。ヘッダーに再度 JS を追加し、「Piggy-Bank」を参照したところ、ついに正しく動作しました！ありがとうございます！
ただ、その特定のアイコンにはまだ問題があります。いいね付きの投稿といいねなしの投稿が全く同じに見えてしまい、いいねなし用のアウトライン版が存在しないのです。Font Awesome のサイトを再度確認したところ、アウトライン版のアイコンは PRO 版限定であることがわかりました。その案は却下ですね。
非営利団体で、会費も徴収していないので、1 つのアイコンのために年間 100 ドルも払うつもりはありません。
というわけで、再び自分でアイコンを作成する方向に戻ります。その手順をもう一度確認してみます。

「いいね！」 3
5

両方追加しましたか？（私はあなたがやっていることはしていないので、これも役に立たないかもしれませんが）。いいねを「サムズアップ」のように表示するテーマコンポーネントがありますので、いいねを変更するために必要なすべての要素を追加しているか確認してみてください。（あるいは、そのアイコン自体が機能しないのかもしれません）

「いいね！」 2
6

はい、自分で作成するためにいくつか試行錯誤しました。残念ながら、OP に記載されている SVG スプライトファイルの形式例へのリンクは空白のページが表示されるだけで、読み込めません。そのため、推測して作成しました。Illustrator で両方の SVG を作成し、エクスポートした後、Chrome で「要素の検証」を開いてパスファイル情報を取得しました。

Mac を使用しているため、テキストエディタを開き、スプライトファイルに入れるべきだと考えられる情報をコピーしました。その後、拡張子を svg に変更し、テーマにアップロードして、ヘッダーに JS コードを追加しました。

これが正しいかどうかは不明ですが、おそらく正しくないでしょう。なぜなら、サイトのテーマをプレビューすると完全にクラッシュしてしまうからです。「このディスカッションフォーラムを動作させているソフトウェアで予期しない問題が発生しました」という「おっと、エラー」が表示されます。アップロードしたアイコン用スプライト SVG を削除して少し待ってから再度アクセスすると、サイトが正常に読み込まれます。

以下に、ファイル内の 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

「いいね！」 2
7

icons-sprite を二度追加しないでください。

SVG パスをコードブロックに貼り付けていただけますか？アイコンをスプライトに配置する際に問題が発生しているようですので、お手伝いします。

「いいね！」 6
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>
「いいね！」 2
9

Discourse Gifs は、例として使用できるカスタム GIF アイコンを付属しています：

「いいね！」 8
10

はい、こちらをお試しください：Dropbox

d-liked に対して replaceIcon の呼び出しを追加しただけですので、お使いのインスタンス内のコンポーネントを編集し、他の行を追加する必要があります。SVG ファイル内の ID を使用してください。現在は単純に SVGpig と SVGpigout となっています。

「いいね！」 10
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

「いいね！」 8
12

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