VisualforceでSLDSアイコンを使いたいとき、毎回書き方忘れて調べる羽目になるのでメモ書き。
NGパターン
Icons - Lightning Design System
SLDSのサイトだと↓のように書いてあるけれど、これだと動かない。
<span class="slds-icon_container slds-icon-utility-announcement" title="Description of icon when needed">
<svg class="slds-icon slds-icon-text-default" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#announcement"></use>
</svg>
<span class="slds-assistive-text">Description of icon when needed</span>
</span>
OKパターン
<apex:page lightningStyleSheets="true">
<!-- ↓をapex:page配下に入れないとだめだよ -->
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="ja">
<div>
<span class="slds-icon_container slds-icon-utility-announcement">
<svg class="slds-icon slds-icon-text-default" aria-hidden="true">
<use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#announcement')}"></use>
</svg>
<span class="slds-assistive-text">Description of icon when needed</span>
</span>
</div>
</apex:page>
Visualforce で SLDS アイコンを使用 | Visualforce 開発者ガイド | Salesforce Developers
Visualforce開発者ガイドに書いてある通り、以下2点を差し替える必要がある。
- <html>タグにxmlns属性を追加
- <use>タグのxlink:href属性をURLFORを使って$Asset.SLDSから参照するよう変更
アイコンタイプについて
アイコンタイプは4種類。
- Utility
- Doctype
- Standard & Custom
- Action
<span class="slds-icon_container slds-icon-<TYPE>-<ICON>">
<svg class="slds-icon slds-icon-text-default" aria-hidden="true">
<use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/<TYPE>-sprite/svg/symbols.svg#<ICON>')}"></use>
</svg>
<span class="slds-assistive-text">Description of icon when needed</span>
</span>
<TYPE>にアイコンタイプ、<ICON>にアイコン名を入れればOK。