添加 svg 圖像作為語義 UI 輸入的圖標

Question

我正在使用來自語義 UI 的輸入來創建搜索輸入：

import React from 'react';
import { Input } from 'semantic-ui-react';

export default ({ placeholder, onChange }) => {
  return (
    <Input
      icon="search"
      icon={<img src={searchIcon} />}
      iconPosition="left"
      placeholder={placeholder}
      onChange={onChange}
    />
  );
};

它有效並且看起來不錯。

問題是我需要用 svg 圖像更改其圖標。 所以 svg 被導入到文件中並像這樣使用：

import React from 'react';
import { Input } from 'semantic-ui-react';
import searchIcon from '../../assets/icons/searchIcon.svg';

export default ({ placeholder, onChange }) => {
  return (
    <Input
      icon={<img src={searchIcon} />}
      iconPosition="left"
      placeholder={placeholder}
      onChange={onChange}
    />
  );
};

問題是它把圖標放在輸入之外並放在它的右側。 它應該在輸入內部和左側。

添加svg后樣式沒有變化，為什么和原來的圖標位置不一樣？

Answer 1

當我們通過屬性“icon”添加一些圖標時，最有可能的語義ui添加特殊樣式。 Semantic-ui-react 不支持自定義圖標。 :,(

在類型聲明中，我們可以閱讀： /** Optional Icon to display inside the Input. */icon?: any | SemanticShorthandItem<InputProps> /** Optional Icon to display inside the Input. */icon?: any | SemanticShorthandItem<InputProps>

我的主張：給 CSS 添加一些樣式，就像我在沙箱里一樣

.input {
  position: relative;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  position: absolute;
  right: 5px;
  width: 10px;
}

Answer 2

我通過傳遞一個自定義組件來使其工作，其中 svg 圖像由具有icon類的i標簽包裝：

const CustomIcon = (
  <i className="icon">
    <img width={38} height={38} src={searchIcon} />
  </i>
);

const App = () => {
  return (
    <Input icon={CustomIcon} iconPosition="left" placeholder="placeholder" />
  );
};

這種方法的好處是您可以更改iconPosition而不會破壞這種方法的樣式。

---

為了提供更多上下文，圖標顯示在正確的位置是由於應用於此選擇器的樣式： .ui.icon.input>i.icon 。 因為它需要一個i標簽，所以如果您不在i標簽之間包裝圖像，則不會應用樣式。