nextjs中封装一个svg组件的思路

3 min read

  1. 首先创建一个SvgIcon组件，负责渲染svg图标。

  2. 然后，在SvgIcon组件内部使用React.createElement函数创建一个svg元素，并给svg元素设置属性，包括宽、高、颜色、样式等。

  3. 接着，使用require或import语句引入需要的svg图标文件。

  4. 最后将引入的svg图标文件作为SvgIcon组件的子元素传递给该组件，即可渲染出所需要的svg图标。

  5. 可以使用props传进来的参数来自定义图标的宽高、颜色及其他样式，比如图标的className等。

  6. 可以考虑将常用的svg图标封装到一个icons文件夹下的一个index.js文件中，使得SvgIcon组件可以方便地使用这些图标。