如何将 SVG 导入 Next.js 组件?
[英] How to import SVG into Next.js component?
本文介绍了如何将 SVG 导入 Next.js 组件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将文件中的 SVG 图像导入 Next.js 组件.
在资产文件夹中我有 google.svg(图标):
<g fill="none";fillRule=偶数"><路径d=M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v.21653737373737302.535-6.24z"填充=#4285F4"；/><路径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.094-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.0953-182.50.202A8.498 8.498 0 0 0 12.5 21z"填充=#34A853"；/><路径d=M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.4803c 0.267-1.615s.097.328 2.67.904 3.817l2.84-2.202z"填充=#FBBC05"；/><路径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 ..268207 8.4596-2.406-2.48207 2.272-16.7153.504 4.756-3.504z"填充=#EA4335"；/></svg> 我需要在 Next.js 组件的 this 中导入该 SVG:
从'../assets/google.svg'导入googleLogo；class Login 扩展了 React.Component {使成为() {返回 (<LoginLayout title="登录页面"><div><Link href="/auth/google"><a className="button"><div><span className="svgIcon t-popup-svg">{googleLogo}//<---- 在此处导入图标</span> </a></链接>
</LoginLayout>);}}
我安装了这个包:https://www.npmjs.com/package/next-图片
并根据 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) =>配置，distDir: '../_next'}),withImages({排除:path.resolve(__dirname, 'client/assets/svg'),网络包(配置，选项){返回配置；}}));为什么我的 SVG 导入不起作用?
解决方案
另一种方法是为您的 svg 制作一个组件.我喜欢这种方法，因为如果 svg 需要，我可以轻松地传递宽度、高度颜色等的道具.
//GoogleLogo.js从反应"导入反应；导出默认函数 GoogleLogo() {返回 (<svg className="svgIcon-use";宽度=25"高度=37"viewBox=0 0 25 25"><g fill="none";fillRule=偶数"><路径d=M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v.21653737373737302.535-6.24z"填充=#4285F4"；/><路径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.094-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.0953-182.50.202A8.498 8.498 0 0 0 12.5 21z"填充=#34A853"；/><路径d=M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.4803c 0.267-1.615s.097.328 2.67.904 3.817l2.84-2.202z"填充=#FBBC05"；/><路径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 ..268207 8.4596-2.406-2.48207 2.272-16.7153.504 4.756-3.504z"填充=#EA4335"；/></svg>);}并在上面的文件中.
从./GoogleLogo"导入 GoogleLogo；class Login 扩展了 React.Component {使成为() {返回 (<LoginLayout title="登录页面"><div><Link href="/auth/google"><a className="button"><div><span className="svgIcon t-popup-svg"><谷歌标志/></span> </a></链接>
</LoginLayout>);}}
I am trying to import an SVG image from file into a Next.js component.
In the assets folder I have 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>
I need to import that SVG inside of this inside of the Next.js component:
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>
);
}
}
I installed this package: https://www.npmjs.com/package/next-images
and set configuration based on that documentation in 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;
}
})
);
Why my import of SVG does not work?
解决方案
Another approach would be to make a component for your svg. I like this approach because I can easily pass in props for width, height color etc if required on the 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>
);
}
and in your file from above.
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>
);
}
}
这篇关于如何将 SVG 导入 Next.js 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
