該賞金過期3天。這個問題的答案有資格獲得 50聲望獎勵。 Danny Richard Aboo想引起更多人對這個問題的關注。
我正在將 single-spa 用于模塊化 React 應用程式。我正在使用 Typescript、Webpack 和 svg-url-loader。SVG 似乎已生成并存在 ([hash].svg)，但未正確加載（您看不到影像，只是一個占位符）。
這是我的 Webpack 配置：
module.exports = (webpackConfigEnv, argv) => {
const defaultConfig = singleSpaDefaults({
orgName: "Daboo1998",
projectName: "react-module",
webpackConfigEnv,
argv,
});
return merge(defaultConfig, {
// modify the webpack config however you'd like to by adding to this object
module: {
rules: [
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
limit: 10000000,
},
},
],
},
]
}
});
};
這就是 SVG 宣告：
declare module "*.svg" {
const src: string;
export default src;
}
以及我如何使用它：
import homeIcon from "./icons/house-4.svg";
...
<img src={homeIcon} />
我可能做錯了什么？如果需要更多資訊，請評論！
uj5u.com熱心網友回復：
因為它在 svg（標量矢量圖形）中，所以它本身就是一個影像，不需要進入 src 屬性，你可以自己渲染 homeIcon。
您還可以將 Homeicon 創建為組件 (homeIcon.tsx)，如下所示（我的示例使用 EllipsisIcon）：
import React from "react";
const EllipsisIcon = () => {
return (
<svg
aria-hidden="true"
focusable="false"
data-prefix="fal"
data-icon="ellipsis-v"
className="svg-inline--fa fa-ellipsis-v fa-w-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 64 512"
>
<path
fill="currentColor"
d="M32 224c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zM0 136c0 17.7 14.3 32 32 32s32-14.3 32-32-14.3-32-32-32-32 14.3-32 32zm0 240c0 17.7 14.3 32 32 32s32-14.3 32-32-14.3-32-32-32-32 14.3-32 32z"
></path>
</svg>
);
};
export default EllipsisIcon;為了實作它，你將它作為一個普通組件匯入，并像往常一樣在回傳中使用它。
uj5u.com熱心網友回復：
您可以使用img帶有 webpack的元素顯示SVG file-loader，假設您使用的 webpack 少于 5。npm install file-loader --save-dev在 webpack 配置中添加規則陣列
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'file-loader',
},
],
},
使用img元素對SVG 資產進行樣式設定可能很棘手，因此您最好創建一個 react 組件來為您呈現 SVG，如@Nacho 所述
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/326101.html