作者:小桃爱学PHP | 来源:互联网 | 2022-12-05 18:26
以下代码编译得很好,但图标没有显示:
Icon.jsx
零件:
import React from 'react';
import { css } from 'emotion';
import ArrowRight from "./arrow-right.svg";
export const icOnTypes= {
arrowRight: 'ARROW_RIGHT',
// arrowLeft: 'ARROW_LEFT',
}
const icOnSrc= {
ARROW_RIGHT: ArrowRight,
// ARROW_LEFT: ArrowLeft,
}
export default function Icon({ type }) {
return (
)
};
在浏览器中,请求如下所示:
http://localhost:9001/%22data:image/svg+xml,%3Csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20%20%20viewBox='0%200%20512%20512'%3E%20%3Ctitle%3E%3C/title%3E%20%3Cg%20id='icomoon-ignore'%3E%20%3C/g%3E%20%3Cpath%20d='M310.627%20438.627l160-160c12.497-12.496%2012.497-32.758%200-45.255l-160-160c-12.497-12.496-32.758-12.496-45.255%200s-12.497%2032.758%200%2045.255l105.373%20105.373h-306.745c-17.673%200-32%2014.327-32%2032s14.327%2032%2032%2032h306.745l-105.373%20105.373c-6.248%206.248-9.372%2014.438-9.372%2022.627s3.124%2016.379%209.372%2022.627c12.497%2012.497%2032.758%2012.497%2045.255%200z'%3E%3C/path%3E%20%3C/svg%3E%22
Icon.jsx
故事:
import { action } from "@storybook/addon-actions";
import Icon from "../components/Icon/Index";
import { iconTypes } from "../components/Icon/Index";
storiesOf("Icon", module)
.add("with text", () => (
));
当我填写src
一个http
路径(例如:" https://s.cdpn.io/3/kiwi.svg ")时它工作得很好.
当我直接在浏览器中打开svg文件时,它也打开正常.
任何帮助,将不胜感激.