# Cannot import svg

**URL:** <https://discourse.aurelia.io/t/cannot-import-svg/1222>\
**Category:** Uncategorized\
**Created:** [May 16, 2018, 2:14pm UTC](https://discourse.aurelia.io/t/cannot-import-svg/1222 "2018-05-16T14:14:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![meta-pratap-ranawat](https://avatars.discourse-cdn.com/v4/letter/m/6bbea6/32.png) [@meta-pratap-ranawat](https://discourse.aurelia.io/u/meta-pratap-ranawat)\
**Post date:** [May 16, 2018, 2:14pm UTC](https://discourse.aurelia.io/t/cannot-import-svg/1222/1 "2018-05-16T14:14:21Z")

</div>

Hi all,

i am unable to import svg file in app.ts.

project type: webpack&typscript

i tried  
import icons from “text!trumbowyg/dist/ui/icons.svg”  
import icons from “trumbowyg/dist/ui/icons.svg!text”  
import icons from “trumbowyg/dist/ui/icons.svg”

compile time error

Cannot find module ‘text!trumbowyg/dist/ui/icons.svg’  
Cannot find module ‘trumbowyg/dist/ui/icons.svg!text’.  
Cannot find module ‘trumbowyg/dist/ui/icons.svg’.

---

<div class="post-metadata">

**Author:** ![KarelHeyndrickx](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/karelheyndrickx/32/1805_2.png) [@KarelHeyndrickx](https://discourse.aurelia.io/u/KarelHeyndrickx)\
**Post date:** [June 4, 2020, 9:36am UTC](https://discourse.aurelia.io/t/cannot-import-svg/1222/2 "2020-06-04T09:36:36Z")

</div>

I’m having the same problem now as well 😐

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [June 4, 2020, 9:45am UTC](https://discourse.aurelia.io/t/cannot-import-svg/1222/3 "2020-06-04T09:45:47Z")

</div>

Can you try

```auto
import * as myicon from '../path/to/my.svg'

```

---

<div class="post-metadata">

**Author:** ![jbockle](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jbockle/32/607_2.png) [@jbockle](https://discourse.aurelia.io/u/jbockle)\
**Post date:** [June 4, 2020, 12:44pm UTC](https://discourse.aurelia.io/t/cannot-import-svg/1222/4 "2020-06-04T12:44:06Z")

</div>

you might need typings for typescript compiler to work with that extension, i.e. create a svg.d.ts file like:

```auto
declare module '*.svg' {
  const svg: string;
  export default svg;
}

```

---

<div class="post-metadata">

**Author:** ![KarelHeyndrickx](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/karelheyndrickx/32/1805_2.png) [@KarelHeyndrickx](https://discourse.aurelia.io/u/KarelHeyndrickx)\
**Post date:** [June 5, 2020, 6:33am UTC](https://discourse.aurelia.io/t/cannot-import-svg/1222/5 "2020-06-05T06:33:52Z")

</div>

Jbockles answer looks like it’s more in the right direction but I’ll further explain the situation I’m having.

I’m using a wrapper module called aurelia-trumbowyg-plugin which uses the module trumbowyg. The base module (trumbowyg) has an icons.svg file in it. The icons.svg file is just a simple svg file that contains \<symbols\> and \<paths\>

![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/f/f5b8afe7c35b3621293752347bc9b84b4bb8ea4b.png)

The documentation of the wrapper tells webpack projects to configure the svgs like so

> import svgPath from ‘trumbowyg/dist/ui/icons.svg’;  
> …  
> aurelia.use.plugin(PLATFORM.moduleName(‘aurelia-trumbowyg-plugin’), {svgPath});  
> …

I am however, not using webpack but ‘CLI’s built bundler and AMD module loader’ with typescript.

Knowing this, do you have any idea how I can import the svg’s?