Angular 10+SCSS项目按需引入Font Awesome图标可行性咨询

这种按需引入Font Awesome图标的方式，完美契合你遵循的SCSS 7.1架构，和你之前精简Bootstrap的思路完全一致。下面是一步步的实现方案：

1. 安装Font Awesome作为开发依赖 #

首先只安装核心包和你需要的图标风格包（比如免费的Solid风格，如果你需要其他风格比如Regular/Brands，替换对应的包名即可）：

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons --save-dev

如果是Font Awesome Pro用户，安装对应的Pro图标包即可，命令逻辑一致。

2. 在_vendors.scss中按需引入图标 #

打开你的src/styles/_vendors.scss（对应SCSS 7.1架构里的vendors文件），按照以下方式编写：

// 先引入Font Awesome的核心基础样式
@import '~@fortawesome/fontawesome-svg-core/styles';

// 定义你需要的图标列表（只写实际要用的图标名称）
$fa-icons: (
  search,
  user,
  heart // 举个例子，根据你的需求添加/删除
);

// 引入对应图标风格的变量、混合宏和基础图标定义
@import '~@fortawesome/free-solid-svg-icons/_variables';
@import '~@fortawesome/free-solid-svg-icons/_mixins';
@import '~@fortawesome/free-solid-svg-icons/_icons';

// 生成你指定图标的样式代码
@include fa-icon($fa-icons);

这样编译后只会生成你列出的这些图标的样式，不会打包整个Font Awesome图标库，极大减少了CSS体积。

3. 在Angular模板中使用图标 #

和常规使用Font Awesome一样，直接用类名调用即可：

<!-- 搜索图标 -->
<i class="fas fa-search"></i>
<!-- 用户图标 -->
<i class="fas fa-user"></i>

额外小贴士 #

• 如果需要自定义图标样式（比如颜色、大小），可以在引入Font Awesome样式之前，覆盖它的SCSS变量：

  // 自定义主色
  $fa-primary-color: #2c3e50;
  // 自定义图标默认大小
  $fa-font-size: 1.2rem;
  
  // 再引入核心样式和图标
  @import '~@fortawesome/fontawesome-svg-core/styles';
  // ... 后续代码同上
  

• 如果你需要多种风格的图标（比如同时用Solid和Brands），只需要安装对应的包，然后在_vendors.scss里重复引入对应风格的变量、混合宏，再定义对应风格的图标列表即可。

内容的提问来源于stack exchange，提问作者Tschareck