Cannot import svg

1

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

1 Like
2

I’m having the same problem now as well :neutral_face:

1 Like
3

Can you try

import * as myicon from '../path/to/my.svg'
1 Like
4

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

declare module '*.svg' {
  const svg: string;
  export default svg;
}
2 Likes
5

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

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?