@11ty/eleventy-img

Utility to perform build-time image transformations.

SVG 인라인 방법

• Adding inline SVGs to Eleventy.js - simpixelated.com
• Manage your SVG files with Eleventy’s Render plugin | chriskirknielsen - Eleventy 플러그인 및 필터 개발 방법에 대한 설명 ¹

const Image = require("@11ty/eleventy-img")
module.exports = function (eleventyConfig) {
  eleventyConfig.addNunjucksAsyncShortcode("svgIcon", async filename => {
    const metadata = await Image(`./src/_includes/assets/${filename}`, {
      formats: ["svg"],
      dryRun: true,
    })
    return metadata.svg[0].buffer.toString()
  })
  return config
}

With that in place, I could inline an SVG file anywhere I needed it in my templates using Nunjucks, like so:

{% svgIcon 'url-to-svg.svg' %}

See also

• 11ty

Favorite site

• Github - 11ty/eleventy-img
• Image — Eleventy

References

---

1. Manage_your_SVG_files_with_Eleventy_Render_plugin_-_chriskirknielsen.pdf ↩