Source data URI imports
SVGs may be imported as source data URIs and passed to the standard
<img> element (see main article). This is done by appending
?source-data-uri to the import:
import imageUrl from "./image.svg?source-data-uri";A line width of an image may be preserved
by adding a preserve-line-width parameter to the import query:
import imageUrl from "./image.svg?source-data-uri&preserve-line-width";Other transformations may be applied via configuration.
Rendered demo
Demo's source code
src
assets
icons
lineart
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.28003 22C8.00316 22 9.40003 20.6031 9.40003 18.88C9.40003 17.1569 8.00316 15.76 6.28003 15.76C4.55691 15.76 3.16003 17.1569 3.16003 18.88C3.16003 20.6031 4.55691 22 6.28003 22Z" stroke="red" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.84 16.8001V4.60009C20.84 2.00009 19.21 1.64009 17.56 2.09009L11.32 3.79009C10.18 4.10009 9.40002 5.00009 9.40002 6.30009V8.47009V9.93009V18.8701" stroke="red" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.72 19.9199C19.4431 19.9199 20.84 18.5231 20.84 16.7999C20.84 15.0768 19.4431 13.6799 17.72 13.6799C15.9968 13.6799 14.6 15.0768 14.6 16.7999C14.6 18.5231 15.9968 19.9199 17.72 19.9199Z" stroke="red" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.40002 9.5199L20.84 6.3999" stroke="red" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.73 3.51001L15.49 7.03001C15.73 7.52002 16.37 7.99001 16.91 8.08001L20.1 8.61001C22.14 8.95001 22.62 10.43 21.15 11.89L18.67 14.37C18.25 14.79 18.02 15.6 18.15 16.18L18.86 19.25C19.42 21.68 18.13 22.62 15.98 21.35L12.99 19.58C12.45 19.26 11.56 19.26 11.01 19.58L8.01997 21.35C5.87997 22.62 4.57997 21.67 5.13997 19.25L5.84997 16.18C5.97997 15.6 5.74997 14.79 5.32997 14.37L2.84997 11.89C1.38997 10.43 1.85997 8.95001 3.89997 8.61001L7.08997 8.08001C7.61997 7.99001 8.25997 7.52002 8.49997 7.03001L10.26 3.51001C11.22 1.60001 12.78 1.60001 13.73 3.51001Z" stroke="green" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.53 20.4201H6.21C3.05 20.4201 2 18.3201 2 16.2101V7.79008C2 4.63008 3.05 3.58008 6.21 3.58008H12.53C15.69 3.58008 16.74 4.63008 16.74 7.79008V16.2101C16.74 19.3701 15.68 20.4201 12.53 20.4201Z" stroke="#7272ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.52 17.0999L16.74 15.1499V8.83989L19.52 6.88989C20.88 5.93989 22 6.51989 22 8.18989V15.8099C22 17.4799 20.88 18.0599 19.52 17.0999Z" stroke="#7272ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.5 11C12.3284 11 13 10.3284 13 9.5C13 8.67157 12.3284 8 11.5 8C10.6716 8 10 8.67157 10 9.5C10 10.3284 10.6716 11 11.5 11Z" stroke="#7272ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg><?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve"><style type="text/css"> .st0{fill:none;stroke:#007F00;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;} .st1{fill:none;stroke:#FF0000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;} .st2{fill:none;stroke:#0000FF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st3{fill:none;stroke:#FF00FF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st4{fill:none;stroke:#F7931E;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st5{fill:none;stroke:#ED1E79;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}</style><g> <g> <path class="st0" d="M64,4.7L64,4.7c26.3,0,47.6,21.3,47.6,47.6v71"/> <path class="st1" d="M16.4,123.3v-71C16.4,26,37.7,4.7,64,4.7"/> <polyline class="st2" points="111.6,123.3 102.1,109.3 92.5,123.3 83,109.3 73.5,123.3 64,109.3 54.5,123.3 45,109.3 35.5,123.3 25.9,109.3 16.4,123.3 "/> </g> <path class="st3" d="M27.5,52.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5"/> <path class="st4" d="M71.5,52.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5"/> <path class="st5" d="M76.7,75.1c0,8-6.5,14.5-14.5,14.5s-14.5-6.5-14.5-14.5"/></g></svg><?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve"><style type="text/css"> .st0{fill:none;stroke:#FFB531;stroke-width:2;stroke-miterlimit:10;} .st1{fill:none;stroke:#FF4500;stroke-width:2;stroke-miterlimit:10;}</style><g> <g> <path class="st0" d="M106.7,59.7c-0.6-6.2-2.6-12.1-5.6-17.3l-9.8,12.7L106.7,59.7z"/> <path class="st0" d="M101.1,85.6c3-5.2,5-11,5.6-17.3l-15.4,4.5L101.1,85.6z"/> <path class="st0" d="M96,35.4c-4.1-4.5-9-8.2-14.7-10.7l-0.4,16.1L96,35.4z"/> <path class="st0" d="M21.3,68.3c0.6,6.2,2.6,12.1,5.6,17.3l9.8-12.7L21.3,68.3z"/> <path class="st0" d="M54.9,106c2.9,0.6,6,1,9.1,1c3.1,0,6.2-0.3,9.1-1L64,92.7L54.9,106z"/> <path class="st0" d="M81.3,103.3C87,100.8,92,97.2,96,92.6l-15.1-5.4L81.3,103.3z"/> <path class="st0" d="M32,92.6c4.1,4.5,9,8.2,14.7,10.7l0.4-16.1L32,92.6z"/> <path class="st0" d="M26.9,42.4c-3,5.2-5,11-5.6,17.3l15.4-4.5L26.9,42.4z"/> <path class="st0" d="M73.1,22c-2.9-0.6-6-1-9.1-1c-3.1,0-6.2,0.3-9.1,1L64,35.3L73.1,22z"/> <path class="st0" d="M46.7,24.7C41,27.2,36,30.8,32,35.4l15.1,5.4L46.7,24.7z"/> </g> <polygon class="st1" points="64,35.3 81.8,9.4 80.9,40.8 110.5,30.2 91.3,55.1 121.4,64 91.3,72.9 110.5,97.8 80.9,87.2 81.8,118.6 64,92.7 46.2,118.6 47.1,87.2 17.5,97.8 36.7,72.9 6.5,64 36.7,55.1 17.5,30.2 47.1,40.8 46.2,9.4 "/></g></svg>import musicIconUrl from "@/assets/icons/music.svg?source-data-uri";import starIconUrl from "@/assets/icons/star.svg?source-data-uri";import videoIconUrl from "@/assets/icons/video.svg?source-data-uri";import ghostImgUrl from "@/assets/lineart/ghost.svg?source-data-uri";import sunImgUrl from "@/assets/lineart/sun.svg?source-data-uri";
import musicIconPreWidthUrl from "@/assets/icons/music.svg?source-data-uri&preserve-line-width";import starIconPreWidthUrl from "@/assets/icons/star.svg?source-data-uri&preserve-line-width";import videoIconPreWidthUrl from "@/assets/icons/video.svg?source-data-uri&preserve-line-width";import ghostImgPreWidthUrl from "@/assets/lineart/ghost.svg?source-data-uri&preserve-line-width";import sunImgPreWidthUrl from "@/assets/lineart/sun.svg?source-data-uri&preserve-line-width";
export function main() { document.getElementById("app")!.innerHTML += ` <p class="demo-section-caption">Original images:</p>
<div class="images"> <img alt="" src="${musicIconUrl}" class="image" /> <img alt="" src="${starIconUrl}" class="image" /> <img alt="" src="${videoIconUrl}" class="image" /> <img alt="" src="${ghostImgUrl}" class="image" /> <img alt="" src="${sunImgUrl}" class="image" /> </div>
<p class="demo-section-caption">Preserved line width:</p>
<div class="images"> <img alt="" src="${musicIconPreWidthUrl}" class="image" /> <img alt="" src="${starIconPreWidthUrl}" class="image" /> <img alt="" src="${videoIconPreWidthUrl}" class="image" /> <img alt="" src="${ghostImgPreWidthUrl}" class="image" /> <img alt="" src="${sunImgPreWidthUrl}" class="image" /> </div> `;}/// <reference types="vite/client" />
// Link some of the import configs. Unfortunately, it's impossible to fully type it. Use plugin configuration instead.// Use import config when you really need it to avoid @ts-ignore before every import./// <reference types="vite-awesome-svg-loader" />
// Internal types/// <reference types="vite-file-tree-builder" /><!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1" /> </head> <body> <div id="app"></div>
<script type="module"> import { main } from "./src/main.ts"; main(); </script> </body></html>{ "name": "vanilla-source-data-uri-imports", "version": "0.0.0", "private": true, "type": "module", "scripts": { "dev": "npm run build -- --watch", "build": "npm run type-check && npm run build-only", "build-only": "vite build --config vite.config.lib.ts", "type-check": "tsc --noEmit", "lint": "eslint . --ext ts --report-unused-disable-directives --max-warnings 0" }, "dependencies": { "vite-awesome-svg-loader": "*", "vite-file-tree-builder": "*", "vite-astro-entry-generator": "*" }}{ "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "module": "ESNext", "lib": ["ES2020", "DOM", "DOM.Iterable"], "skipLibCheck": true,
/* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true,
/* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true,
"baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "include": ["src"]}import { fileURLToPath, URL } from "node:url";import { defineConfig } from "vite";
// Import vite-awesome-svg-loaderimport { viteAwesomeSvgLoader } from "vite-awesome-svg-loader";
export default defineConfig({ plugins: [viteAwesomeSvgLoader({ urlImportsInLibraryMode: "emit-files" })], resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)), }, },});
Please open file to view its content