nextjs中怎么import svg,并且使用
在Next.js中，你可以直接通过ES6的import语法来导入SVG文件，并将其作为组件使用。首先，确保你的Next.js项目支持静态导入功能（通常情况下，Next.js版本大于9.4就支持了）。
步骤如下：
- 将SVG文件放在
public目录下，或者任何Next.js能够自动导入的目录下（例如images）。 - 使用import语法导入SVG文件。
- 将导入的SVG组件作为组件使用在你的JSX中。
例如，如果你有一个icons/logo.svg文件，并且放在public/icons目录下，你可以这样导入并使用：
import LogoIcon from '../public/icons/logo.svg';
function MyComponent() {
return (
<div>
<LogoIcon width="100" height="100" />
</div>
);
}
export default MyComponent;在上面的例子中，LogoIcon将作为一个React组件被导入，你可以像使用其他React组件那样使用它，并且可以传入props来设置SVG的属性，如width和height。
请注意，如果你的Next.js版本低于9.4，你可能需要使用next-images之类的插件来确保SVG文件可以被正确导入。
评论已关闭