如何在Angular中内联SVG？

Question

我正在尝试在Angular 7中内联加载SVG。

到目前为止，我尝试过：

import icon = require('./icon.svg');

由于文件加载器(`file-loader`)，导致产生了 `icon.svg` 的结果。

import icon = require('raw-loader?!./icon.svg');

结果是：__webpack_public_path__ + "icon.svg"; 这与以下代码相同：

import * as icon3 from 'raw-loader?!./icon.svg';

and

import icon4 from 'raw-loader?!./icon.svg';

将会变成未定义。

但是，将icon.svg重命名为像icon.foo这样的名称，然后使用以下方式加载图标：

import * as icon from 'raw-loader?!./icon.foo';

在typings.d.ts中适当地输入类型，可以得到预期的行为，变量icon保存了内联内容。

对我来说，似乎是file-loader在raw loader之前执行。将node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js更改为像html一样加载svg在规则中也可以工作。但这不是一个好方法。

有什么想法吗？

- Eydrian

---

你想加载 SVG 并仅显示它吗？ - joka00

我想将它们内联，不过找到了解决方案... - Eydrian

Answer 1

因为规则已经定义，所以必须在加载程序的开头放置两个!!来推翻规则：

import icon = require('!!raw-loader?!./icon.svg');

补充 2021

它应该在无需 require 的情况下正常工作... 不要忘记 typings.d.ts 文件

import icon from '!!raw-loader?!./icon.svg';

参见：https://webpack.js.org/loaders/raw-loader/ （在底部查看）

请注意，如果您已经在 webpack.config.js 中为某些扩展名定义了 loader，则应使用以下命令：

'!!raw-loader!./file.css'; // 在请求前添加 !! 将禁用配置中指定的所有 loader

- Eydrian

---

尽管 raw-loader 的 GitHub 页面上引用了相关信息，但它与最新版本的 raw-loader（2.0.0）和 Angular CLI 不兼容。它会产生编译错误。 - Kim Gentes

@KimGentes 一般来说，Angular CLI 能否与 raw-loader 2.0.0 兼容？ - Eydrian

这正是我试图确定的问题。我没有找到任何人使用最新的Angular CLI和新的raw-loader。如果有人已经使用成功，我很想听听他们是如何引用raw-loader包来加载数据文件的。 - Kim Gentes

@KimGentes，“above”(const logo = require('!!raw-loader?!../assets/logo.svg') as string;)在Angular 7 CLI中对我有效。在Angular 8 CLI中，我没有任何编译错误，但结果是一个模块。因此，以下内容有效：const logo = require('!!raw-loader?!../assets/logo.svg').default as string;。 - Łukasz Nojek

更好的是，这在Angular 8 CLI中可以工作：import logo from '!!raw-loader!../assets/logo.svg'; - Łukasz Nojek

Answer 2

我建议您创建一个 .ts 文件。

my-svg.ts

export const mySVG = `<svg></svg>`;

然后你可以正常导入它

import {mySVG} from 'path/to/file/my-svg.ts'

- joka00

---

谢谢，我在一个旧应用程序中有数百个SVG文件。那不是一个解决方案。 - Eydrian

哦，那这不是一个解决方案。 - joka00