将 Font Awesome Pro(zip 分发)与 Angular 集成
Integrating Font Awesome Pro (zip distribution) with Angular
我想将我们公司购买许可的 Font Awesome Pro 6 集成到我们的 Angular 个项目中。
我的老板给了我 zip 分发包(不是 NPM 私有令牌,需要更新),我想升级 @fortawesome/angular-fontawesome 以使用专业版。
到目前为止,我们一直在使用 FA 的免费版本和 @fortawesome/free-solid-svg-icons
。特别是,该库声明了在转译过程中使用的 Typescript 符号。
之前我有 (package.json)
"@fortawesome/angular-fontawesome": "^0.9.0",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
问题:给定 FA Pro 6 的 zip 文件,其中包含以下内容
如何将字体集成到 Angular 项目中?
到目前为止我尝试了什么
我尝试将 FA 6 Pro 目录解压到 src/font-awesome-pro
,并从 package.json
.
中删除最后 4 个包(上面列出的)
我还希望修改angular.json
手动添加scss和js
"scripts": [
...
"./src/font-awesome-pro/js/fontawesome.js",
...
]
"styles": [
...
"./src/font-awesome-pro/scss/fontawesome.scss",
"./src/styles.scss"
但我的应用程序无法编译
Error: src/app/shared/shared-components/spinner-block/spinner-block.component.ts:5:41 - error TS2307: Cannot find module '@fortawesome/free-solid-svg-icons' or its corresponding type declarations.
5 import {faSpinner, IconDefinition} from '@fortawesome/free-solid-svg-icons';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
还有
export class AmlcFontAwesomeModule {
constructor(library: FaIconLibrary, faConfig: FaConfig) {
// Add an icon to the library for convenient access in other components
library.addIconPacks(far, fas, fab);
library.addIcons(fa.faPencilAlt, fa.faRecycle, fa.faTrash, fa.faUser, fa.faLock, fa.faHome);
faConfig.fixedWidth = true;
}
}
我认为网站上的可下载资源不适用于 angular-fontawesome
库。它们旨在以经典 HTML 方式使用。
首先我会尝试说服你的老板给你令牌。我认为除非有人点击网站上的重新生成按钮,否则它实际上不会改变。如果不可能,我想你有两个选择:
您应该能够从 npm.fontawesome.com
download/install 图标包和 fontawesome-svg-core
并将它们提交到存储库,而不是每次都安装它们。为此,您将需要令牌,但如果将来重新生成令牌,应用程序将不会中断。
从 angular-fontawesome
切换到 vanilla Font Awesome 发行版。这不是推荐的方法,但它应该与 <i>
标签一起工作,这些标签被你在存档中的 vanilla Font Awesome JS 代码替换。
也链接 this issue 因为它有类似的讨论。
我想将我们公司购买许可的 Font Awesome Pro 6 集成到我们的 Angular 个项目中。
我的老板给了我 zip 分发包(不是 NPM 私有令牌,需要更新),我想升级 @fortawesome/angular-fontawesome 以使用专业版。
到目前为止,我们一直在使用 FA 的免费版本和 @fortawesome/free-solid-svg-icons
。特别是,该库声明了在转译过程中使用的 Typescript 符号。
之前我有 (package.json)
"@fortawesome/angular-fontawesome": "^0.9.0",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
问题:给定 FA Pro 6 的 zip 文件,其中包含以下内容
如何将字体集成到 Angular 项目中?
到目前为止我尝试了什么
我尝试将 FA 6 Pro 目录解压到 src/font-awesome-pro
,并从 package.json
.
我还希望修改angular.json
手动添加scss和js
"scripts": [
...
"./src/font-awesome-pro/js/fontawesome.js",
...
]
"styles": [
...
"./src/font-awesome-pro/scss/fontawesome.scss",
"./src/styles.scss"
但我的应用程序无法编译
Error: src/app/shared/shared-components/spinner-block/spinner-block.component.ts:5:41 - error TS2307: Cannot find module '@fortawesome/free-solid-svg-icons' or its corresponding type declarations.
5 import {faSpinner, IconDefinition} from '@fortawesome/free-solid-svg-icons';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
还有
export class AmlcFontAwesomeModule {
constructor(library: FaIconLibrary, faConfig: FaConfig) {
// Add an icon to the library for convenient access in other components
library.addIconPacks(far, fas, fab);
library.addIcons(fa.faPencilAlt, fa.faRecycle, fa.faTrash, fa.faUser, fa.faLock, fa.faHome);
faConfig.fixedWidth = true;
}
}
我认为网站上的可下载资源不适用于 angular-fontawesome
库。它们旨在以经典 HTML 方式使用。
首先我会尝试说服你的老板给你令牌。我认为除非有人点击网站上的重新生成按钮,否则它实际上不会改变。如果不可能,我想你有两个选择:
您应该能够从
npm.fontawesome.com
download/install 图标包和fontawesome-svg-core
并将它们提交到存储库,而不是每次都安装它们。为此,您将需要令牌,但如果将来重新生成令牌,应用程序将不会中断。从
angular-fontawesome
切换到 vanilla Font Awesome 发行版。这不是推荐的方法,但它应该与<i>
标签一起工作,这些标签被你在存档中的 vanilla Font Awesome JS 代码替换。
也链接 this issue 因为它有类似的讨论。