UI 工具包图标在加载时未呈现

Question

我有一个正在开发的 nextjs 博客，我正在使用的组件之一是此卡片组件：

function Card(props) {
  return (
    <div className="uk-card uk-card-default uk-width-1-2@m">
      <div className="uk-card-header">
        <div
          className="uk-grid-small uk-flex-middle"
          uk-grid
          uk-scrollspy="cls: uk-animation-slide-left; repeat: true"
        >
          <div className="uk-width-auto">
            <Image
              alt="Profile Picture"
              className="uk-border-circle"
              src={props.pic}
              height={200}
              width={200}
            />
          </div>

          <div className="uk-width-expand">
            <h3 className="uk-card-title uk-margin-remove-bottom">
              {props.name}
            </h3>
          </div>
        </div>
      </div>
      <div className="uk-card-body">
        <p>{props.description}</p>
      </div>
      <div className="uk-card-footer">
      <a href={props.linkedin} uk-icon="linkedin" className="footerbutton"></a>
      </div>
    </div>
  )
}

我使用该组件并在页面中使用它，如下所示：

export default Main =()=> {
return(
            <Card
              pic={placeholderpic}
              linkedin='https://www.linkedin.com/'
              name="Harry Truman"
              description="Lorem ipsum"
            />
    )
}

页脚中的图标只有在页面打开后才会呈现刷新3-4次。该卡的所有其余部分在首次加载时都能正确渲染。理想情况下，我想知道三件事：

A. 为什么会发生这种情况？ B. 以后如何解决这个问题？ C. 最合适的解决方法是什么？

编辑： 这个问题本质上与我的相同：

Uikit Icons with React and Next.js< /a>

对我来说，解决方案不太理想，我不想将所有内容都包装在自定义的“UIKit”组件中。