diff options
| -rw-r--r-- | .eleventy.js | 18 | ||||
| -rw-r--r-- | src/_includes/icon.html | 13 | ||||
| -rw-r--r-- | src/_includes/icon.njk | 6 | ||||
| -rw-r--r-- | src/index.njk (renamed from src/index.html) | 10 |
4 files changed, 24 insertions, 23 deletions
diff --git a/.eleventy.js b/.eleventy.js index b9f82634..d5f7c388 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -32,10 +32,11 @@ module.exports = function(eleventyConfig) { eleventyConfig.addExtension("svg", { outputFileExtension: 'svg', compileOptions: { - permalink: function(contents, inputPath) { - const basename = path.basename(inputPath); - return `icons/${basename}`; - } + permalink: false + // permalink: function(contents, inputPath) { + // const basename = path.basename(inputPath); + // return `icons/${basename}`; + // } }, compile: async (inputContent, inputPath) => { @@ -47,15 +48,6 @@ module.exports = function(eleventyConfig) { } }); - eleventyConfig.addTemplateFormats("json"); - eleventyConfig.addExtension("json", { - outputFileExtension: 'json', - compile: async function(inputContent) { - return async () => { - return inputContent; - }; - } - }); eleventyConfig.addCollection('icons', collection => { return collection.getFilteredByGlob('./src/icons/*.svg').sort((a, b) => { diff --git a/src/_includes/icon.html b/src/_includes/icon.html index ced25557..c63e6476 100644 --- a/src/_includes/icon.html +++ b/src/_includes/icon.html @@ -1,8 +1,9 @@ {% assign stroke = include.stroke | default: 2 %}{% assign width = 24 %}{% assign name = include.name %}{% assign icon = site.icons | where: "slug", name | first %}{% capture replace-to %}<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-{{ name }}" width="{{ width }}" height="{{ width }}" viewBox="0 0 24 24" stroke-width="{{ stroke }}" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/>{% endcapture %}{% assign content = icon.content | replace: '<svg>', replace-to %}{{ content }} -{{ name }} -{{ params.name }} -{{ include.name }} -{{ includes.name }} -{{ include.stroke }} -{{ params.stroke }} +1{{ name }} +1{{ er }} +2{{ params.name }} +3{{ include.name }} +4{{ includes.name }} +5{{ include.stroke }} +6{{ params.stroke }} diff --git a/src/_includes/icon.njk b/src/_includes/icon.njk new file mode 100644 index 00000000..d0137da8 --- /dev/null +++ b/src/_includes/icon.njk @@ -0,0 +1,6 @@ +{% macro icon(name, stroke = 2, width = 24) %} +<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-{{ name }}" width="{{ width }}" height="{{ width }}" viewBox="0 0 24 24" stroke-width="{{ stroke }}" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> + <path stroke="none" d="M0 0h24v24H0z" fill="none"/> + {{ collections.icons | first }} +</svg> +{% endmacro %} diff --git a/src/index.html b/src/index.njk index 91ed1b90..4bab0312 100644 --- a/src/index.html +++ b/src/index.njk @@ -1,14 +1,16 @@ --- layout: default --- +{% import "icon.njk" as m %} + <div class="container"> <div class="box"> <div class="mb"> <div class="icons-list"> {% for icon in collections.icons %} - {% assign name = icon.fileSlug %} + {% set name = icon.fileSlug %} <div class="icons-list-icon js-icon" title="{{ name }}" data-icon="{{ name }}"> - {% icon name %} + {{ m.icon(name) }} </div> {% endfor %} </div> @@ -18,9 +20,9 @@ layout: default <div class="mb"> <div class="icons-list"> {% for icon in collections.icons %} - {% assign name = icon.fileSlug %} + {% set name = icon.fileSlug %} <div class="icons-list-icon js-icon" title="{{ name }}" data-icon="{{ name }}"> - {% include "icon.html", name="name", stroke="1.25" %} + {{ m.icon(name, stroke="1.25") }} </div> {% endfor %} </div> |