Icon Experiments

.ddev/.env.web

@@ -0,0 +1,10 @@
+CRAFT_DB_PASSWORD="db"
+CRAFT_DB_PORT="3306"
+CRAFT_WEB_ROOT="/var/www/html/web"
+PRIMARY_SITE_URL="https://viget-craft-starter.ddev.site"
+CRAFT_DB_SERVER="db"
+CRAFT_DB_DATABASE="db"
+CRAFT_DB_USER="db"
+MAILPIT_SMTP_HOSTNAME="127.0.0.1"
+MAILPIT_SMTP_PORT="1025"
+CRAFT_DB_DRIVER="mysql"

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
     "intelephense.environment.phpVersion": "8.2",
-    "php.version": "8.2",
-    "twiggy.framework": "craft"
+    "php.version": "8.2"
 }

config/project/project.yaml

@@ -1,4 +1,4 @@
-dateModified: 1751982681
+dateModified: 1757708816
 elementSources:
   craft\elements\Entry:
     -
@@ -50,6 +50,13 @@ email:
     username: $SYSTEM_EMAIL_USERNAME
   transportType: craft\mail\transportadapters\Smtp
 fs:
+  local:
+    hasUrls: true
+    name: Local
+    settings:
+      path: '@webroot/local-filesystem'
+    type: craft\fs\Local
+    url: /local-filesystem
   s3:
     hasUrls: true
     name: S3

config/project/volumes/assets--853413e4-e02c-487e-81a5-04e58eb18683.yaml

@@ -2,6 +2,7 @@ altTranslationKeyFormat: null
 altTranslationMethod: none
 fieldLayouts:
   a7f496e4-142f-49a4-b241-2cb6ce1a1f30:
+    cardThumbAlignment: end
     tabs:
       -
         elementCondition: null
@@ -65,7 +66,7 @@ fieldLayouts:
         name: Content
         uid: c5d6deb9-e383-44bf-aa0f-a8de30dfca6f
         userCondition: null
-fs: s3
+fs: local
 handle: assets
 name: Assets
 sortOrder: 1

package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@alpinejs/collapse": "^3.14.1",
     "@alpinejs/focus": "^3.14.1",
-    "alpinejs": "^3.14.1"
+    "alpinejs": "^3.14.1",
+    "external-svg-loader": "^1.7.1"
   }
 }

src/js/app.js

@@ -1,3 +1,7 @@
+import 'external-svg-loader'
+
+// SVGLoader.destroyCache();
+
 import '../css/app.css'
 
 import Alpine from 'alpinejs'

templates/_elements/home.twig

@@ -1,7 +1,9 @@
 {% extends '_layouts/base.twig' %}
 
+{% set asset = craft.assets.id(427).one() %}
+
 {% block content %}
-  {{ include("_blocks/index.twig", {
-    blocks: entry.pageBlocks,
-  }) }}
+  <div style="--icon-color: red;">
+    <svg data-src="{{ asset.url }}" fill="currentColor"></svg>
+  </div>
 {% endblock %}

web/local-filesystem/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore