资产

这是一个单独的软件包,包含:

• 字体(包括CSS) font-face (定义)
• 图标( SVG 为反应组件)

安装

通过运行将此软件包添加到您的工程中 :

npm install @amsterdam/asc-assets

基本用途

图标

import { IconName } from '@amsterdam/asc-assets'

return <IconName />

字体

目前包含您应用程序中使用的字体有两种方式,您可以在您的构建中从这个包中复制,或者包含来自阿姆斯特丹CDN的版本. 请注意,如果您想要使用阿姆斯特丹主机的版本,您必须有一个运行在 amsterdam.nl 域空间.

使用阿姆斯特丹CDN

将以下代码添加到您的 index.html 文件 :

<link href="https://static.amsterdam.nl/fonts/fonts.css" rel="stylesheet" />

没有别的事可做, 您的应用程序中应该有字体 .

在构建时复制文件

这个步骤假设您正在使用WebPack,但应该也可以使用其他工具或简单的 shell脚本来完成.

在您的 WebPack 配置中添加以下代码 :

new CopyWebpackPlugin({
  patterns: [
    {
      from: './node_modules/@amsterdam/asc-assets/static/fonts',
      to: 'fonts',
    },
  ],
})

并确保在您的样式表中导入 CSS 文件 :

@import '~@amsterdam/asc-assets/static/fonts/fonts.css';

构建工程

npm run build # generates JSX components using the optimized SVG icons