[英]Render icons from an SVG file on HTML page
我有一個icons.svg
文件,它似乎包含我需要在 Angular 應用程序中使用的資產。
該文件看起來像這樣(注意, ...
表示由於安全原因而省略的數據):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="..." id="o"/></defs><symbol id="icon-add-member-contain-heavy" viewBox="0 0 64 64"><path d="B0 ... 4A3q"/></symbol><symbol id="icon-add-member-contain-light" viewBox="0 0 64 64"><path d="A5 ... 2i5m"
...
...
.../></symbol></svg>
我試圖在我的組件 HTML 中引用該文件(如下面的代碼所示),但我不知道如何呈現圖標。 我猜我需要使用上面 svg 代碼中顯示的id
,比如id="icon-add-member-contain-heavy"
?
<div>
<img src="../../src/assets/icons.svg">
</div>
在 angular 中,您應該能夠將 svg 渲染為組件。 來自 angular 文檔:
import { Component } from '@angular/core';
@Component({
selector: 'app-svg',
templateUrl: './svg.component.svg',
styleUrls: ['./svg.component.css']
})
export class SvgComponent {
fillColor = 'rgb(255, 0, 0)';
changeColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
this.fillColor = `rgb(${r}, ${g}, ${b})`;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.