SVGs

Learn how to import SVGs within your HTML pages

Using inline SVGs is the recommended way for a number of reasons, that said, Frontal provides a more convenient way to working with SVGs, instead of copy pasting the SVGs directly within your HTML code, you can instead use the <i-svg> HTML tag.

Usage

The <i-svg src="..."> tag can be used just like the <img> tag, with the exception that, the actual source code of the SVG will be replacing the <i-svg> tag, allowing your HTML to remain neat and readable.

<!-- input -->
<body>
    <i-svg src="@assets/svgs/right-arrow.svg"></i-svg>
</body>

<!-- output -->
<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM136 240c0-9.3 4.1-17.5 10.5-23.4l-31-9.3c-8.5-2.5-13.3-11.5-10.7-19.9 2.5-8.5 11.4-13.2 19.9-10.7l80 24c8.5 2.5 13.3 11.5 10.7 19.9-2.1 6.9-8.4 11.4-15.3 11.4-.5 0-1.1-.2-1.7-.2.7 2.7 1.7 5.3 1.7 8.2 0 17.7-14.3 32-32 32S136 257.7 136 240zm168 154.2c-27.8-33.4-84.2-33.4-112.1 0-13.5 16.3-38.2-4.2-24.6-20.5 20-24 49.4-37.8 80.6-37.8s60.6 13.8 80.6 37.8c13.8 16.5-11.1 36.6-24.5 20.5zm76.6-186.9l-31 9.3c6.3 5.8 10.5 14.1 10.5 23.4 0 17.7-14.3 32-32 32s-32-14.3-32-32c0-2.9.9-5.6 1.7-8.2-.6.1-1.1.2-1.7.2-6.9 0-13.2-4.5-15.3-11.4-2.5-8.5 2.3-17.4 10.7-19.9l80-24c8.4-2.5 17.4 2.3 19.9 10.7 2.5 8.5-2.3 17.4-10.8 19.9z"></path></svg>
</body>

In some cases, SVGs can have no dimensions and therefore remain invisible, that said, attributes passed to the <i-svg> tag will be added to the final <svg> tag.

<!-- input -->
<body>
    <i-svg src="@assets/svgs/right-arrow.svg" width="26" height="26"></i-svg>
</body>

<!-- output -->
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM136 240c0-9.3 4.1-17.5 10.5-23.4l-31-9.3c-8.5-2.5-13.3-11.5-10.7-19.9 2.5-8.5 11.4-13.2 19.9-10.7l80 24c8.5 2.5 13.3 11.5 10.7 19.9-2.1 6.9-8.4 11.4-15.3 11.4-.5 0-1.1-.2-1.7-.2.7 2.7 1.7 5.3 1.7 8.2 0 17.7-14.3 32-32 32S136 257.7 136 240zm168 154.2c-27.8-33.4-84.2-33.4-112.1 0-13.5 16.3-38.2-4.2-24.6-20.5 20-24 49.4-37.8 80.6-37.8s60.6 13.8 80.6 37.8c13.8 16.5-11.1 36.6-24.5 20.5zm76.6-186.9l-31 9.3c6.3 5.8 10.5 14.1 10.5 23.4 0 17.7-14.3 32-32 32s-32-14.3-32-32c0-2.9.9-5.6 1.7-8.2-.6.1-1.1.2-1.7.2-6.9 0-13.2-4.5-15.3-11.4-2.5-8.5 2.3-17.4 10.7-19.9l80-24c8.4-2.5 17.4 2.3 19.9 10.7 2.5 8.5-2.3 17.4-10.8 19.9z"></path></svg>
</body>

Resolving SVGs

Just like when working with assets, SVGs can be resolved in a variety of ways:

<body>
    <!-- from an NPM installed package -->
    <i-svg src="@fortawesome/fontawesome-free/svgs/solid/address-card.svg"></i-svg>

    <!-- from the assets directory using the @assets alias -->
    <i-svg src="@assets/svgs/align-left.svg"></i-svg>

    <!-- from the root directory of the project -->
    <i-svg src="~/dir1/align-right.svg"></i-svg>

    <!-- from the public directory -->
    <i-svg src="/angry.svg"></i-svg>
</body>

The svgs directory

For reusable HTML products, the svgs directory feature can play a great role in keeping svgs organized and even simpler to use in HTML pages; within the root directory of your project, create a directory named svgs with the following structure:

├── svgs/
│   ├── set-1/
│   │   ├── icon1.svg
│   ├── flags/
│   │   ├── egypt.svg
│   │   ├── usa.svg

With the above directory in place, you are now able to use the <i-svg> tag in the following way:

<body>
    <i-svg set="flags" name="egypt"></i-svg>
    <i-svg set="set-1" name="icon1"></i-svg>
</body>
  • The set attribute defines the name of the set directory
  • The name attribute defines the name of SVG to use

Further Customization

Within your svgs directory, create a file named svgs.config.js, that file should export an object with the following properties:

module.exports = {
    // Define the tag name that Frontal will look up SVGs within HTML pages
    tag: 'i-svg',

    // Attribute names to strip from SVGs tags
    strip: {
        width: true,
        height: true,
    },

    // map is a key/value of shortcuts to use when resolving svgs to make usage simpler.
    // the following example will replace the `fa` within <i-svg src="fa/solid/right-arrow">
    // with the provided value
    map: {
        fa: '@fortawesome/fontawesome-free/svgs'
    },

    /**
     * the construct method gives you the option to modify how the SVGs are replaced,
     * for example you could place a wrapper HTML element for svgs within all pages.
     *
     * @param attrs - the attributes passed to the <i-svg> tag
     * @param svg - the actual source code of the svg file
     * @param info - an object containing width and height if available
     * @returns {string}
     */
    construct(attrs, svg, info) {
        return `<span class="svg-wrapper">${svg}</span>`;
    }
};

frontal.config.js

The following are the available options you can modify within your frontal.config.js for further customization:

module.exports = {
  // ...
  svgs: {
    // set to false to disable the svgs feature entirely
    enabled: true,

    // set a different path for the svgs directory
    path: 'svgs',

    // define a different name of the svgs config
    configFile: 'svgs.config.js'
  }
  // ...
};
Would You Like To KnowAbout Our Next Products & Free Tools?