Skip to content

@11ty/eleventy-img

Utility to perform build-time image transformations.

SVG 인라인 방법

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

Favorite site

References


  1. Manage_your_SVG_files_with_Eleventy_Render_plugin_-_chriskirknielsen.pdf