SvgImage component (rendering via SVG symbols)

Note

SVG symbols provide a way to customize images that doesn’t hurt performance as much as putting SVGs directly into the DOM. See main article for the details.

SvgImage component renders SVG source code into an SVG symbol, so you’ll have more freedom to manipulate it. Most importantly, it allows you to set custom colors.

This example also introduces vite-awesome-svg-loader configuration. Make sure to check out vite.config.ts file in the demo’s files below.

Rendered demo

Demo's source code

src

assets

all

icons

music.svg star.svg video.svg

lineart

ghost.svg sun.svg

original

icons

music.svg star.svg video.svg

lineart

ghost.svg sun.svg

preserve-line-width

icons

music.svg star.svg video.svg

lineart

ghost.svg sun.svg

set-current-color

icons

music.svg star.svg video.svg

lineart

ghost.svg sun.svg

App.vue main.ts

env.d.ts index.html package.json tsconfig.app.json tsconfig.json tsconfig.node.json vite.config.ts

<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>

<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>

<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>

<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>

<template>
  <p class="demo-section-caption">Original images:</p>

  <div class="images">
    <SvgImage
      :src="musicIconSrc"
      class="image"
    />
    <SvgImage
      :src="starIconSrc"
      class="image"
    />
    <SvgImage
      :src="videoIconSrc"
      class="image"
    />
    <SvgImage
      :src="ghostImgSrc"
      class="image"
    />
    <SvgImage
      :src="sunImgSrc"
      class="image"
    />
  </div>

  <p class="demo-section-caption">Preserve line width:</p>

  <div class="images">
    <SvgImage
      :src="musicIconPreWidthSrc"
      class="image"
    />
    <SvgImage
      :src="starIconPreWidthSrc"
      class="image"
    />
    <SvgImage
      :src="videoIconPreWidthSrc"
      class="image"
    />
    <SvgImage
      :src="ghostImgPreWidthSrc"
      class="image"
    />
    <SvgImage
      :src="sunImgPreWidthSrc"
      class="image"
    />
  </div>

  <p class="demo-section-caption">Set current color:</p>

  <div class="images">
    <SvgImage
      :src="musicIconCurrentColorSrc"
      class="image"
      style="color: #00988a"
    />
    <SvgImage
      :src="starIconCurrentColorSrc"
      class="image"
      style="color: orange"
    />
    <SvgImage
      :src="videoIconCurrentColorSrc"
      class="image"
      style="color: hotpink"
    />
    <SvgImage
      :src="ghostImgCurrentColorSrc"
      class="image"
      style="color: purple"
    />
    <SvgImage
      :src="sunImgCurrentColorSrc"
      class="image"
      style="color: green"
    />
  </div>

  <p class="demo-section-caption">All transformations:</p>

  <div class="images">
    <SvgImage
      :src="musicIconAllSrc"
      class="image"
      style="color: #00988a"
    />
    <SvgImage
      :src="starIconAllSrc"
      class="image"
      style="color: orange"
    />
    <SvgImage
      :src="videoIconAllSrc"
      class="image"
      style="color: hotpink"
    />
    <SvgImage
      :src="ghostImgAllSrc"
      class="image"
      style="color: purple"
    />
    <SvgImage
      :src="sunImgAllSrc"
      class="image"
      style="color: green"
    />
  </div>
</template>

<script setup lang="ts">
import musicIconSrc from "@/assets/original/icons/music.svg";
import starIconSrc from "@/assets/original/icons/star.svg";
import videoIconSrc from "@/assets/original/icons/video.svg";
import ghostImgSrc from "@/assets/original/lineart/ghost.svg";
import sunImgSrc from "@/assets/original/lineart/sun.svg";

import musicIconPreWidthSrc from "@/assets/preserve-line-width/icons/music.svg";
import starIconPreWidthSrc from "@/assets/preserve-line-width/icons/star.svg";
import videoIconPreWidthSrc from "@/assets/preserve-line-width/icons/video.svg";
import ghostImgPreWidthSrc from "@/assets/preserve-line-width/lineart/ghost.svg";
import sunImgPreWidthSrc from "@/assets/preserve-line-width/lineart/sun.svg";

import musicIconCurrentColorSrc from "@/assets/set-current-color/icons/music.svg";
import starIconCurrentColorSrc from "@/assets/set-current-color/icons/star.svg";
import videoIconCurrentColorSrc from "@/assets/set-current-color/icons/video.svg";
import ghostImgCurrentColorSrc from "@/assets/set-current-color/lineart/ghost.svg";
import sunImgCurrentColorSrc from "@/assets/set-current-color/lineart/sun.svg";

import musicIconAllSrc from "@/assets/all/icons/music.svg";
import starIconAllSrc from "@/assets/all/icons/star.svg";
import videoIconAllSrc from "@/assets/all/icons/video.svg";
import ghostImgAllSrc from "@/assets/all/lineart/ghost.svg";
import sunImgAllSrc from "@/assets/all/lineart/sun.svg";

import { SvgImage } from "vite-awesome-svg-loader/vue-integration";
</script>

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");

/// <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"
      src="/src/main.ts"
    ></script>
  </body>
</html>

{
  "name": "vue-svg-image",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "npm run build-only -- --watch",
    "build": "run-p type-check \"build-only {@}\" --",
    "build-only": "vite build --config vite.config.lib.ts",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "vite-awesome-svg-loader": "*",
    "vite-file-tree-builder": "*"
  }
}

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// Import vite-awesome-svg-loader
import { viteAwesomeSvgLoader } from "vite-awesome-svg-loader";

export default defineConfig({
  plugins: [
    vue(),
    viteAwesomeSvgLoader({
      preserveLineWidthList: [/preserve-line-width\//, /all\//], // Files to preserve line width of
      replaceColorsList: [/set-current-color\//, /all\//], // Files to replace colors of
      urlImportsInLibraryMode: "emit-files",
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

Please open file to view its content