Use hero icons (#876)

mbraak · Dec 28, 2024 · 5614f51 · 5614f51
1 parent a55f566
commit 5614f51
Show file tree

Hide file tree

Showing 13 changed files with 26 additions and 17 deletions.
diff --git a/docs/_examples/10_icon_buttons.html b/docs/_examples/10_icon_buttons.html
@@ -12,15 +12,25 @@ <h1>Example 10 - use icon toggle buttons</h1>
 
 <p>
     You can use the <strong>openedIcon</strong> and <strong>closedIcon</strong> options to use html for
-    the toggle buttons. You can for example use <a href="https://github.com/FortAwesome/Font-Awesome">Fontawesome icons</a>.
+    the toggle buttons. You can for example use <a href="https://heroicons.com/">Hero icons</a>.
 </p>
 <div id="tree1" class="not-prose" data-url="/example_data/"></div>
 
 <h3>javascript</h3>
 
 {% highlight js %}
 $('#tree1').tree({
-    closedIcon: $('<i class="fas fa-arrow-circle-right"></i>'),
-    openedIcon: $('<i class="fas fa-arrow-circle-down"></i>')
+    closedIcon: $(
+        `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+            class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
+        </svg>`
+    ),
+    openedIcon: $(
+        `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+            class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" />
+        </svg>`
+    )
 });
 {% endhighlight %}
diff --git a/docs/static/bower.json b/docs/static/bower.json
@@ -1,7 +1,6 @@
 {
     "name": "jqtree-docs",
     "dependencies": {
-        "fontawesome": "^6.3.0",
         "jquery": "^3.7.0",
         "jquery-mockjax": "^2.7.0-beta.0"
     }

diff --git a/docs/static/bower_components/fontawesome/css/all.min.css b/docs/static/bower_components/fontawesome/css/all.min.css
diff --git a/docs/static/bower_components/fontawesome/webfonts/fa-brands-400.ttf b/docs/static/bower_components/fontawesome/webfonts/fa-brands-400.ttf
diff --git a/docs/static/bower_components/fontawesome/webfonts/fa-brands-400.woff2 b/docs/static/bower_components/fontawesome/webfonts/fa-brands-400.woff2
diff --git a/docs/static/bower_components/fontawesome/webfonts/fa-regular-400.ttf b/docs/static/bower_components/fontawesome/webfonts/fa-regular-400.ttf
diff --git a/docs/static/bower_components/fontawesome/webfonts/fa-regular-400.woff2 b/docs/static/bower_components/fontawesome/webfonts/fa-regular-400.woff2
diff --git a/docs/static/bower_components/fontawesome/webfonts/fa-solid-900.ttf b/docs/static/bower_components/fontawesome/webfonts/fa-solid-900.ttf
diff --git a/docs/static/bower_components/fontawesome/webfonts/fa-solid-900.woff2 b/docs/static/bower_components/fontawesome/webfonts/fa-solid-900.woff2
diff --git a/docs/static/bower_components/fontawesome/webfonts/fa-v4compatibility.ttf b/docs/static/bower_components/fontawesome/webfonts/fa-v4compatibility.ttf
diff --git a/docs/static/bower_components/fontawesome/webfonts/fa-v4compatibility.woff2 b/docs/static/bower_components/fontawesome/webfonts/fa-v4compatibility.woff2
diff --git a/docs/static/example.postcss b/docs/static/example.postcss
@@ -64,5 +64,6 @@
 .jqtree-tree {
     .jqtree-toggler {
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        align-self: center;
     }
 }
diff --git a/docs/static/examples/icon_buttons.js b/docs/static/examples/icon_buttons.js
@@ -1,12 +1,20 @@
 $.mockjax({
     url: "*",
-    response: function(options) {
+    response: function () {
         this.responseText = ExampleData.exampleData;
     },
-    responseTime: 0
+    responseTime: 0,
 });
 
 $("#tree1").tree({
-    closedIcon: $('<i class="fas fa-arrow-circle-right"></i>'),
-    openedIcon: $('<i class="fas fa-arrow-circle-down"></i>')
+    closedIcon: $(
+        `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
+        </svg>`,
+    ),
+    openedIcon: $(
+        `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" />
+        </svg>`,
+    ),
 });