从 SVG 文件夹创建 Eleventy 集合

Question

大家好， 我创建了一个小的 SVG 图标集，并希望使用 Eleventy 在一页上的文件夹中显示它们。但与此同时，我需要 SVG 代码，因为用户应该能够快速将 SVG 代码复制到剪贴板。有一些用于 SVG 内容放置的插件，但我不能将它们与 110 集合结合使用。

I was able to place the SVG code into an eleventy page with eleventy-plugin-svg-contents. But since the iconset will be 200+ icons I really do not want to copy & paste them all individually.

此外，我已经设法将文件夹中的所有 SVG 文件添加到集合中，但由于它应该是矢量图标集，所以我无法使用图像文件。

{% for icon in collections.iconGallery %}
  <figure>
    <img class="m-2 w-6 h-6" src="{{ icon }}" alt="" />
  </figure>
{% endfor %}

我想实现以下目标：

将所有 SVG 图标文件放在一个文件夹中
创建该文件夹中所有 SVG 文件的集合
显示呈现的 SVG 内容（无 <img> 标签）
显示名称（不带扩展名的文件名）和 SVG 代码

出于测试目的，我将提供三个图标作为 SVG 代码示例：

<!-- annotation.svg -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 8H17M7 12H12M16.8284 17H19C20.1046 17 21 16.1046 21 15V6C21 4.89543 20.1046 4 19 4H5C3.89543 4 3 4.89543 3 6V15C3 16.1046 3.89543 17 5 17H7.17157C7.70201 17 8.21071 17.2107 8.58579 17.5858L10.5858 19.5858C11.3668 20.3668 12.6332 20.3668 13.4142 19.5858L15.4142 17.5858C15.7893 17.2107 16.298 17 16.8284 17Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

<!-- briefcase.svg -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 7H5C3.89543 7 3 7.89543 3 9V13M8 7V5C8 3.89543 8.89543 3 10 3H14C15.1046 3 16 3.89543 16 5V7M8 7H16M16 7H19C20.1046 7 21 7.89543 21 9V13M3 13V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V13M3 13H8M21 13H16M8 13H16M8 13V15M8 13V11M16 13V11M16 13V15" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

<!-- calendar.svg -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 9V19C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V9M4 9V7C4 5.89543 4.89543 5 6 5H8M4 9H20M20 9V7C20 5.89543 19.1046 5 18 5H16M16 5V3M16 5H8M8 3V5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

我希望我的问题足够清楚，如果您有任何问题，请在评论中告诉我。在此先感谢大家。

Answer 1

我建议使用 JavaScript data files 的替代方法。由于您可以通过 Node 完全访问文件系统，因此您可以手动将文件夹解析为一个数组，其中包含您需要的所有信息，包括 SVG 源。

快速而肮脏，可能需要一些调整：

// _data/icons.js
const fg = require('fast-glob');
const path = require('path');
const fs = require('fs');

module.exports = function() {
    return new Promise(async (resolve, reject) => {
        const iconFolder = path.resolve(__dirname, '../path/to/your/icon/folder/');
        const svgIcons = await fg('**/*.svg', { cwd: iconFolder };
        const iconData = await Promise.all(svgIcons.map(async (name) => {
            const nameWithoutExtension = path.parse(name).name;
            const source = fs.readFileSync(path.resolve(iconFolder, name), { encoding: 'utf8' });
            const sourceWithClass = source.replace('<svg', '<svg class="my-custom-class"');
            return { name, source, sourceWithClass, nameWithoutExtension };
        }));
        resolve(iconData);
    });
};

此数据文件 returns 一个对象数组，其中包含图标文件夹中每个 SVG 图标的名称（或相对于图标基础文件夹的路径，如果有子目录）和来源。然后您可以在您的模板中遍历它并相应地显示名称和来源。

注意上面的例子使用了fast-glob, though you can of course also manually iterate through the files in the folder using fs.

同样应该可以使用集合，因为您现在可以将任何您想要的数据结构放入集合中。

访问数据

Eleventy automatically parses data file 并使它们可用于您的模板。所以你可以在任何模板中像这样访问图标数据（以 Nunjucks 语法为例）：

{% for icon in icons %}
    <figure>
        {# output the svg source code including the added class. the safe filter is necessary to prevent nunjucks from escaping the SVG code  #}
        {{ icon.sourceWithClass | safe }}
        {# output the file name (excluding the extension) #}
        <figcaption>{{ icon.nameWithoutExtension }}</figcaption>
    </figure>
{% endfor %}

请注意，用于访问数据的变量名称（此处：icons）取决于数据文件的名称。有关详细信息，请参阅 documentation。

从 SVG 文件夹创建 Eleventy 集合

Create an Eleventy collection from SVG folder

svg

eleventy

访问数据