Font Awesome のアイコンを表示するサンプルを追加

package.json

@@ -11,6 +11,7 @@
         "format:check": "prettier --check ."
     },
     "devDependencies": {
+        "@fortawesome/free-solid-svg-icons": "6.5.1",
         "@types/node": "20.11.24",
         "@vanilla-extract/vite-plugin": "4.0.4",
         "eslint": "8.57.0",

src/icon.ts

@@ -0,0 +1,19 @@
+export function volumeHigh(): SVGSVGElement {
+    const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
+    svgEl.setAttribute(
+        'viewBox',
+        `0 0 ${__VOLUME_HIGH_ICON_WIDTH__} ${__VOLUME_HIGH_ICON_HEIGHT__}`,
+    );
+
+    const pathEl = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'path',
+    );
+
+    pathEl.setAttribute('d', __VOLUME_HIGH_ICON__);
+
+    svgEl.append(pathEl);
+
+    return svgEl;
+}

src/vite-env.d.ts

@@ -0,0 +1,3 @@
+declare const __VOLUME_HIGH_ICON__: string;
+declare const __VOLUME_HIGH_ICON_WIDTH__: string;
+declare const __VOLUME_HIGH_ICON_HEIGHT__: string;

vite.config.ts

@@ -1,3 +1,4 @@
+import { faVolumeHigh } from '@fortawesome/free-solid-svg-icons';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import { defineConfig } from 'vite';
 
@@ -19,6 +20,11 @@ export default defineConfig({
             external: ['obsidian'],
         },
     },
+    define: {
+        __VOLUME_HIGH_ICON__: JSON.stringify(faVolumeHigh.icon[4]),
+        __VOLUME_HIGH_ICON_WIDTH__: JSON.stringify(faVolumeHigh.icon[0]),
+        __VOLUME_HIGH_ICON_HEIGHT__: JSON.stringify(faVolumeHigh.icon[1]),
+    },
     plugins: [
         vanillaExtractPlugin({
             identifiers: ({ hash }) => `zhongwenBlock_${hash}`,