Question

以下代码可以正常编译，但是图标不会显示：

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 (
        <div>
            <img src={iconSrc[type]}/>
        </div>
    )
};

在浏览器中，请求如下所示：

 http://localhost:9001/%22data:image/svg+xml,%3Csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='512'%20height='512'%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", () => (
            <Icon type={iconTypes.arrowRight}>
            </Icon>
        ));

当我用src路径填充http时（例如：“ https://s.cdpn.io/3/kiwi.svg”），效果很好。

当我直接在浏览器中打开svg文件时，它也可以正常打开。

任何帮助将不胜感激。

Answer 1

最好使用内联的svg而不是图像。参数化（例如尺寸）也更容易：

Icon.jsx

import React from 'react';

export const iconTypes = {
  arrowRight: 'ARROW_RIGHT',
  arrowLeft: 'ARROW_LEFT',
}

export default function Icon({ type = iconTypes.arrowRight, size = 512 }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox='0 0 512 512'>
      {type === iconTypes.arrowRight &&
        <path d='M310.627 438.627l160-160c12.497-12.496 12.497-32.758 0-45.255l-160-160c-12.497-12.496-32.758-12.496-45.255 0s-12.497 32.758 0 45.255l105.373 105.373h-306.745c-17.673 0-32 14.327-32 32s14.327 32 32 32h306.745l-105.373 105.373c-6.248 6.248-9.372 14.438-9.372 22.627s3.124 16.379 9.372 22.627c12.497 12.497 32.758 12.497 45.255 0z' />
      }
      {type === iconTypes.arrowLeft &&
        <path d="..." />
      }
    </svg>
  )
};

注意：您应该保留viewBox道具硬编码512，以使秤正常工作。

Answer 2

我认为在您的应用程序中显示默认图标的最佳方法是对它们进行Sprite并使用其类名。这样，您可以缓存并获得更好的性能。

find

有很多免费的工具可以使您的图片生动形象。

Answer 3

您可以在课堂上使用SVG作为背景样式，并根据需要的图标将它们切换出来吗？

为了获得良好的性能，您只能对SVG进行base64编码，然后将内容以背景样式粘贴到CSS中。 http://b64.io/这是编码SVG的好网站

例如

.kiwi {
  background-image: url("data:image/svg+xml;base64,PD94b...");
}

任何问题，大喊！

Answer 4

这可能是由于webpack file-loader选项所致。将outputPath添加到文件加载器选项，并将publicPath对象中的/更改为output。

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: { main: ['./ClientApp/boot.jsx'] },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  output: {
    path: path.join(__dirname, './wwwroot/dist'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        include: /ClientApp/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/react'],
            plugins: [require('@babel/plugin-proposal-class-properties')],
          },
        },
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              limit: 8192,
              outputPath: '/',
            },
          },
        ],
      },
    ],
  },
};

Answer 5

您需要配置webpack来加载inline-svg，为此，请从npm安装库svg-inline-loader并在webpack配置中添加以下内容：

  module: {
    rules: [
      {
       //All the other rules
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader',
      },
    ],
  },

希望这会有所帮助。

Answer 6

对于像我这样迟到的人，我强烈建议使用react-svg

示例代码：

import SvgLogo from './logo.svg';
import ReactSVG from 'react-svg';

...

render(){
  return(
    <ReactSVG src={SvgLogo} />
  );
}

它具有所有必需的自定义类型，以及出色的文档和实时示例。

希望有帮助！

如何在React中引用本地svg？

6 个答案: