Question

到目前为止，似乎无法控制存储在单独文件中的SVG元素。我想也许使用WebPack和npm模块应该可能找不到简单或方便的解决方案。是否可以导入这样的元素？

import icon from "./icons/user.svg"

<icon fill="red" />

我不明白为什么在这里使用SVG这么难，或者为什么我找不到关于这个主题的足够信息。也许我这样做错了？有没有更好的方法来管理React网站的很多图标？我需要使用相当多的东西，比如社交网络和类似的东西。

Answer 1

这回答了我的问题：

https://github.com/gilbarbara/react-inlinesvg

将CSS嵌入SVG文档
- 无法使用CSS预处理器（LESS，SASS）
- 无法定位父元素（按钮悬停等）
- 使维护变得困难
链接到SVG文档中的CSS文件
- 与HTML共享样式意味着复制项目中的路径，使维护成为一种痛苦
- 不与HTML共享样式意味着额外的HTTP请求（并且可能在不同的SVG之间复制路径）
- 仍无法定位父元素
- 您的SVG会与您的外部样式表相关联，从而使重用变得复杂。
将SVG嵌入HTML
- Bloats your HTML
- 页面之间的浏览器无法缓存SVG。
- 维护噩梦

但是有一种方法可以回避这些问题：使用XHR请求加载SVG，然后将其嵌入到文档中。这就是这个组件的作用。

我决定使用inline-svg进行反应，但我也被告知另一种将SVG包装到对象中的方法。我对此没有任何了解，因为我还没有尝试过，但我会列出它只是为了填写这个集合：

<object>
  <embed src="/static/filename.svg">
</object>

Answer 2

我建议保持代码简单，并将 SVG 视为 HTML 。这样就可以避免调整其他 SVG / React 问题的大小/拉伸/配置和主机。

创建通用图标组件

const Icon = ({ name, children }) => (
    <svg className={`icon icon-${name}`}>
        {children}
    </svg>
)

创建用户图标组件

const UserIcon = ({ fill }) => (
    // fill your inner svg code here, set fill to the correct react node
)

Answer 3

包括带有四行代码的外部SVG图像：

<svg>
  <use xlinkHref={'/images/logo.svg#Version-2'}>
  </use>
</svg>

在这种情况下，SVG图像“ logo.svg”将具有一个名为“ Version-2”的ID。井号“＃”之后的部分映射到SVG图像中当然必须存在的ID。

Answer 4

我知道我看起来有些挣扎，但这是我最终能得到的最佳解决方案：使用webpack file-loader来获取svg的url并将其用作css掩码，可以在其上应用背景颜色和一些尺寸选择：

const name = 'chevron-up';
const size = 16;
const url = require(`!file-loader!../../../vendor/my-icons/icons/${name}.svg`);

return
  <span style={{
    height: size,
    width: size,
    display: 'inline-block',
    backgroundColor: backgroundColor || 'black',
    WebkitMask: `url('${url}') no-repeat 50% 50% / cover`,
    mask: `url('${url}') no-repeat 50% 50% / cover`,
  }} />
;

目前有几个兼容性问题，但大多数最新浏览器都支持。所以我想我们应该拥抱我的朋友的未来！

https://developer.mozilla.org/fr/docs/Web/CSS/mask

Answer 5

如果您使用Create React App，那么最简单的解决方案是将SVG导入为React组件

import { ReactComponent as User } from './icons/user.svg';

const View = () => <User />;

在文档中查看更多信息：https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs

在React

5 个答案: