NextJS/NextUI集成阿里iconfont

React / NextJS

前置条件： 已经注册了 iconfont

第一步，复制项目 symbol 路径

第二步，在 next 项目集成

  1. 将第一步复制的路径填充到 app -> layout.tsx 中
  2. 将 styles -> globals.css 中加入以下代码:
1
2
3
4
5
6
7
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

第三步，封装组件，使用

在 components 目录下创建 icon.tsx 文件

1
2
3
4
5
6
7
8
9
10
export const ALiIcon = (props: { iconName: string }) => {
  const { iconName } = props;
  const name = `#${iconName}`;

  return (
    <svg aria-hidden="true" className="icon">
      <use xlinkHref={name} />
    </svg>
  );
};

在对应文件测试使用

1
2
3
4
5
import { ALiIcon } from "../../components/icons";

export default Test() {
    return (<ALiIcon iconName="your-iconfont-name" />)
}

代码中 your-iconfont-name 是 iconfont 项目中的 symbol