Visualforce 開発者ガイド
jVisualforce で SLDS アイコンを使用
Lightning Design System (SLDS) には、アクション、カスタム、文書型、標準、およびユーティリティの各アイコンの PNG および SVG (個別かつスプライトマップ) バージョンが含まれます。
Visualforce ページで SVG スプライトマップアイコンを使用するには、属性 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" を <html> タグに追加します。
このアイコンはスタンドアロンであり、意味を持つため、slds-icon_container class を持つ外側の span の内側に配置します。
このアイコンに標準の背景色はありません。背景色を設定するため、2 番目のクラスを span に適用しました。特定のアイコンでデフォルトの色を使用するには、slds-icon-、スプライトマップ名、および -icon を連結してアイコンの特定のユーティリティクラスの名前を構築します。このクラスを <span> 要素に適用します。例では、「standard」スプライトマップと「account」アイコンを使用しているため、クラスは slds-icon-standard-account になっています。
<span> クラスの内側に、slds-icon クラスを持つ <svg> 要素があります。<svg> 要素には <use> タグが含まれており、xlink:href 属性に基づいて表示するアイコンが指定されています。
xlink:href パスを設定する手順は、次のとおりです。
- 使用するアイコンをアイコンページから選択します。どのカテゴリ (アクション、カスタム、文書型、標準、またはユーティリティ) にアイコンが含まれているかをメモします。
- カテゴリスプライト (「standard-sprite」など)、/svg/symbols.svg#、およびカテゴリ内の特定のアイコン (「account」など) を連結して、xlink:href 属性を入力します。これにより、パス assets/icons/standard-sprite/svg/symbols.svg#account が与えられます。
<svg> タグの後の、slds-assistive-text クラスを持つ span 内に補助テキストがあります。