Nancy's Preferred Machete

    This package has been deprecated

    Author message:

    deprecated

    img-svg-inline-loader

    1.3.3 • Public • Published

    [DEPRECATED] img-svg-inline-loader

    npm npm npm

    Webpack loader used for inline replacement of SVG reference in src attribute of img tags with actual content of SVG file.

    Loader has built-in SVGO support for SVG optimization.


    Install

    npm install img-svg-inline-loader --save-dev

    Usage

    In webpack config:

    {
        test: /\.html$/,
        use: [
            {
                loader: "img-svg-inline-loader",
                options: { /* ... */ }
            },
            // ...
        ]
    }

    In code:

    <img svg-inline class="icon" src="./images/fa/user.svg" alt="fa-user" />

    Which replaces into:

    <svg svg-inline class="icon" alt="fa-user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0c88.366 0 160 71.634 160 160s-71.634 160-160 160S96 248.366 96 160 167.634 0 256 0zm183.283 333.821l-71.313-17.828c-74.923 53.89-165.738 41.864-223.94 0l-71.313 17.828C29.981 344.505 0 382.903 0 426.955V464c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48v-37.045c0-44.052-29.981-82.45-72.717-93.134z"/></svg>

    Configuration

    Default options:

    {
        keyword: "svg-inline",
        strict: true,
        xhtml: false,
        svgo: {
            plugins: [
                {
                    cleanupAttrs: true
                },
                // ...
            ]
        }
    }

    Explanation:

    • keyword
      Defines keyword, which marks img tags you want to inline replace with SVG. Keyword has to be wrapped with whitespace characters (e.g. space). In case of some conflicts, you can also use data version of your keyword (e.g. data-keyword).

    • strict
      In strict mode loader replaces only img tags with defined keyword. If strict mode is disabled, loader replaces all img tags.

    • xhtml
      In XHTML mode attribute minimization is forbidden. Empty attributes are filled with their names to be XHTML-compliant (e.g. disabled="disabled").

    • svgo
      SVGO documentation can be found here. If you do not want use SVGO, set it to null.

    Notes: User-defined options are not deep-merged with default options.


    License

    MIT

    Install

    npm i img-svg-inline-loader

    DownloadsWeekly Downloads

    20

    Version

    1.3.3

    License

    MIT

    Unpacked Size

    7.28 kB

    Total Files

    5

    Last publish

    Collaborators

    • oliverfindl