You can import your own SVG files directly in your TypeScript code:

import myIcon from "./icons/my-icon.svg";

console.log(`SVG code:\n${typeArticle}`);

Importing directly from an *.svg file requires the SVG to be located underneath the src folder and in addition to this a type definition file custom.d.ts:

declare module "*.svg" {
  const content: string;
  export default content;
}

You can then use the icon in your ExtJS component by generating a CSS class for the SVG icon with the aforementioned SvgIconUtil utility class:

import { SvgIconUtil } from "@coremedia/studio-client.base-models";

Config(Button, {
  iconCls: SvgIconUtil.getIconStyleClassForSvgIcon(myIcon),
});

Section 9.3, “Studio Plugins” describes how to load external resources. You can also reference SVG icons in your SCSS code as follows:

.my-icon {
  background-image: url(get-resource-path("images/example.svg"));
}

Then pass the CSS class to the iconCls configuration of your component:

Config(Button, {
  iconCls: "my-icon",
})

Due to technical limitations of the ExtJS SCSS compiler the SVG file needs to be located in the sencha/resources folder.