如何在React中匯入SVG圖示

我想在應用程式中匯入太多 SVG 圖示，每個圖示都需要通過 css 自定義顏色，這是最簡單的匯入反應方式？匯入到<img/>標簽不支持通過 css 填充更改顏色。為每個圖示創建一個 .js 組件對于 250 多個圖示來說太難了。另一種選擇是什么？請幫忙

import IconArrow from "./Arrow.svg";
import Circlearrowdownright from "./Arrow.js";

<img className="ico" src={IconArrow} />
<i className="ico"><Circlearrowdownright /></i>

https://codesandbox.io/s/svg-icon-3z0qu6

uj5u.com熱心網友回復：

您可以直接將其匯入并用作 React 組件：

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

<ExampleIcon className="css-class"/>

uj5u.com熱心網友回復：

您可以動態匯入 SVG 并即時渲染 ( CodeSandbox )。無需.js為每個 SVG 檔案創建單獨的組件。

這hook

function useDynamicSVGImport(name, options = {}) {
  const ImportedIconRef = useRef();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState();

  const { onCompleted, one rror } = options;
  useEffect(() => {
    setLoading(true);
    const importIcon = async () => {
      try {
        ImportedIconRef.current = (
          await import(`./${name}.svg`)
        ).ReactComponent;
        if (onCompleted) {
          onCompleted(name, ImportedIconRef.current);
        }
      } catch (err) {
        if (onError) {
          onError(err);
        }
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    importIcon();
  }, [name, onCompleted, one rror]);

  return { error, loading, SvgIcon: ImportedIconRef.current };
}

Icon使用鉤子的組件

/**
 * Simple wrapper for dynamic SVG import hook. You can implement your own wrapper,
 * or even use the hook directly in your components.
 */
export const Icon = ({ name, onCompleted, one rror, ...rest }) => {
  const { error, loading, SvgIcon } = useDynamicSVGImport(name, {
    onCompleted,
    one rror
  });
  if (error) {
    return error.message;
  }
  if (loading) {
    return "Loading...";
  }
  if (SvgIcon) {
    return <SvgIcon {...rest} />;
  }
  return null;
};

用法

return (
    <>
      <Icon
        name="Arrow"
        fill="gray"
        width="100"
        onCompleted={handleOnCompleted}
        onError={handleIconError}
      />
      <Icon
        name="delete"
        fill="gray"
        width="50"
        onCompleted={handleOnCompleted}
        onError={handleIconError}
      />
    </>
  );

uj5u.com熱心網友回復：

React 適用于原生 Web 組件。只有當您想使用事件與他們互動或傳遞資料時，React（仍然）無法支持標準：https ://custom-elements-everywhere.com/

• 創建<svg-icon>標簽只需幾行代碼。
• 添加了一個replaceWith屬性，以便<svg>您加載替換<svg-icon>，使其更容易使用全域 CSS。
• 添加了將任何內容移動到 shadowDOM的shadowRoot屬性

customElements.define("svg-icon", class extends HTMLElement {
  async connectedCallback(
    src = this.getAttribute("src"),
    shadowRoot = this.shadowRoot || this.attachShadow({mode:"open"})
  ) {
    shadowRoot.innerHTML = await (await fetch(src)).text()
    shadowRoot.append(...this.querySelectorAll("[shadowRoot]"))
    this.hasAttribute("replaceWith") && this.replaceWith(...shadowRoot.childNodes)
  }
});

body {
  display: grid;
  grid: 1fr/1fr 5fr;
}

path {
  stroke: green;
  stroke-width: .2;
  fill: red;
}

<svg-icon replaceWith src="https://svg-cdn.github.io/bi-arrows.svg"></svg-icon>
<svg-icon src="https://svg-cdn.github.io/simple-worldmap.svg">
  <style shadowRoot>
    path {
      fill: orange
    }
  </style>
</svg-icon>

標籤：javascript 反应 svg 进口

上一篇：在具有透明背景的影像上放置漸變背景

下一篇：可以標記SVG元素以供以后檢索嗎？