angular4中引入svg

阿里icon

直接放入assets文件夹后
html引入即可

<div>
    <img src="yourIcon.svg">
</div>

注意：
根位置是index.html文件所在的位置

动态更改svg

可以使用ngStyle指令

<circle [ngStyle]="{stroke:stroke,fill: fill}" 
    id="XMLID_1_" 
    class="st0" cx="91.2" cy="87.2" r="10"    
    (mouSEOver)="func1()"/>

或

<circle [style.stroke]="stroke"
        [style.fill]="fill" 
    id="XMLID_1_" 
    class="st0" cx="91.2" cy="87.2" r="10"    
    (mouSEOver)="func1()"/>

在angular中 尽量避免使用jquery

引入font-awesome

npm install --save font-awesome

angular-cli.json

"apps": [
          {
             "root": "src","outDir": "dist",....
             "styles": [
                "styles.css","../node_modules/bootstrap/dist/css/bootstrap.css","../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
             ],...
         }
       ]

],

如果用scss

在src/.创建一个_variables.scss空文件
在里面添加如下代码

$fa-font-path : '../node_modules/font-awesome/fonts';

在styles.scss里增加

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

测试

<i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!