我正在尝试将svg图像从文件导入next.js组件。
在资产文件夹中,我有google.svg(icon):
<svg className="svgIcon-use" width="25" height="37" viewBox="0 0 25 25">
<g fill="none" fillRule="evenodd">
<path
d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
fill="#4285F4"
/>
<path
d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
fill="#34A853"
/>
<path
d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
fill="#FBBC05"
/>
<path
d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
fill="#EA4335"
/>
</g>
</svg>
我需要将该svg导入next.js组件的内部:
import googleLogo from '../assets/google.svg';
class Login extends React.Component {
render() {
return (
<LoginLayout title="Login Page">
<div>
<Link href="/auth/google">
<a className="button">
<div>
<span className="svgIcon t-popup-svg">
{googleLogo} // <---- import here icon
</span>
</div>
</a>
</Link>
</div>
</LoginLayout>
);
}
}
我安装了此软件包:https://www.npmjs.com/package/next-images
并在next.config.js中基于该文档设置配置:
const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
module.exports = withCSS(
withSass({
webpack: (config) => config,
distDir: '../_next'
}),
withImages({
exclude: path.resolve(__dirname, 'client/assets/svg'),
webpack(config, options) {
return config;
}
})
);
为什么我的svg导入无效?
有什么建议吗?
答案 0 :(得分:1)
另一种方法是为您的svg制作组件。我喜欢这种方法,因为如果需要svg,我可以轻松传递宽度,高度颜色等道具。
例如
//GoogleLogo.js
import React from "react";
export default function GoogleLogo() {
return (
<svg className="svgIcon-use" width="25" height="37" viewBox="0 0 25 25">
<g fill="none" fillRule="evenodd">
<path
d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
fill="#4285F4"
/>
<path
d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
fill="#34A853"
/>
<path
d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
fill="#FBBC05"
/>
<path
d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
fill="#EA4335"
/>
</g>
</svg>
);
}
,并在上方文件中。
import GoogleLogo from "./GoogleLogo";
class Login extends React.Component {
render() {
return (
<LoginLayout title="Login Page">
<div>
<Link href="/auth/google">
<a className="button">
<div>
<span className="svgIcon t-popup-svg">
<GoogleLogo />
</span>
</div>
</a>
</Link>
</div>
</LoginLayout>
);
}
}
答案 1 :(得分:1)
您可以使用svgr将svg转换为组件 https://github.com/gregberge/svgr
答案 2 :(得分:0)
我最近自己添加了此内容。我在Next.js存储库中遵循了示例。
https://github.com/zeit/next.js/tree/master/examples/svg-components
有几个步骤-
1)您需要安装以下依赖项:
2)您需要在.babelrc
内添加插件inline-react-svg
"plugins": [
"inline-react-svg",
]
然后,您应该能够将SVG导入到组件中。这是我使用过的类似内容的要点。
https://gist.github.com/iamchristough/493c60112770058566d559e6860dc4c97
注意-如果您只是<GoogleLogo />
,则需要将其声明为自己的组件{GoogleLogo}
,否则它将出错。 babel如何转换SVG也存在问题,因此SVG文件内的任何更改都不会出现。您需要重命名文件才能使捆绑程序看到更改。
希望这会有所帮助。
答案 3 :(得分:0)