极客观点
项目管理
HarmonyOS
图标显示不出来
以下是相关代码：
_document.tsx
import Document, { Head, Main, NextScript } from "next/document";
import { ServerStyleSheet } from "styled-components";
import sprite from 'svg-sprite-loader/runtime/sprite.build'
// Render sprite
const spriteContent = sprite.stringify()
export default class IntlDocument extends Document<any> {
static async getInitialProps(ctx: any) {
const sheet = new ServerStyleSheet();
const page = ctx.renderPage(App => (props: any) =>
sheet.collectStyles(<App {...props} />)
);
const styleTags = sheet.getStyleElement();
const initialProps = await super.getInitialProps(ctx);
return {
...initialProps,
...page,
styleTags
};
}
render() {
return (
<html>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta name="description" content="在线接单" />
{this.props.styleTags}
</Head>
<body>
<span dangerouslySetInnerHTML={{ __html: spriteContent }} />
<Main />
<NextScript />
</body>
</html>
);
}
}icon组件
import styled from "styled-components";
const IconStyled = styled.svg<{ hoverColor: string }>`
fill: currentColor;
cursor: ${props => props.cursor};
&:hover {
color: ${props => props.hoverColor};
}
`;
export default function Icon({
className,
glyph,
size = 24,
width,
height,
cursor,
hoverColor
}: {
className?: string;
width?:number;
height?:number;
size?: number
glyph: string;
cursor?: string;
hoverColor?: string;
}) {
return (
<IconStyled
className={className}
width={width || size}
height={height || size}
cursor={cursor}
hoverColor={hoverColor}
>
<use xlinkHref={`#icon-${glyph}`}></use>
</IconStyled>
);
}
页面引用 static/svg/icon-success.svg
<Icon glyph="success" size={16} />next.config.js
config.module.rules.push({
test: /\.svg$/,
include: path.resolve(__dirname, './static/svg'),
loader: 'svg-sprite-loader'
})