How do I import svg from file to a component in angular 5?

在Angular 5中将SVG从文件导入到组件中，通常有几种不同的方法可以实现，这取决于SVG在应用中的用途和具体需求。以下是一些常用的方法：

方法1：使用SVG作为组件的模板

1. 创建SVG文件：首先，确保你的SVG文件是优化过的。可以使用工具如SVGO来减少文件大小。

2. 创建Angular组件：生成一个新的Angular组件。

   bash
   ng generate component my-svg

3. 修改组件：将SVG文件的内容直接复制到组件的模板中，例如：

   typescript
   // my-svg.component.ts
   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-my-svg',
     templateUrl: './my-svg.component.svg',
   })
   export class MySvgComponent {}

   在这里，templateUrl属性指向SVG文件。

4. 使用组件：在需要显示SVG的地方，使用新创建的<app-my-svg>组件。

方法2：作为背景图片

1. SVG文件放在资产中：将SVG文件放在src/assets目录下。

2. 在CSS中引用：在组件的CSS文件中，将SVG设置为一个元素的背景图：

   css
   .icon {
     background-image: url('/assets/my-icon.svg');
     width: 100px;  /* 根据实际需要设置宽度 */
     height: 100px; /* 根据实际需要设置高度 */
   }

3. HTML中使用CSS类：在组件的HTML模板中使用上述CSS类：

   html
   <div class="icon"></div>

方法3：使用svg-inline-loader

1. 安装svg-inline-loader：

   bash
   npm install svg-inline-loader --save-dev

2. 修改webpack.config.js（如果你自定义了Angular的webpack配置）：

   javascript
   module: {
     rules: [
       {
         test: /\.svg$/,
         loader: 'svg-inline-loader'
       }
     ]
   }

3. 在组件中引入SVG：

   typescript
   import mySvg from './path/to/my.svg';
   
   @Component({
     selector: 'my-component',
     template: `<div [innerHTML]="mySvg"></div>`,
   })
   export class MyComponent {
     mySvg: string = mySvg;
   }

   这将直接将SVG内容导入并使用Angular的innerHTML绑定显示出来。

以上方法中，选择哪一种取决于你的具体需求，例如是否需要动态修改SVG的颜色或大小，是否需要SVG与HTML其他部分紧密集成等因素。在实际工作中，每种方法都有其适用场景。