添加 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

很可能semantic-ui 在我们通过属性“icon”添加一些图标时添加特殊样式。 Semantic-ui-react 不支持自定义图标。 :,(

在类型声明中我们可以读到： /** Optional Icon to display inside the Input. */icon?: any | SemanticShorthandItem<InputProps>

我的提议：在CSS中添加一些样式，像我在sandbox

中一样

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

Answer 2

我通过传递自定义组件使其工作，其中 svg 图像由 i 标签包裹，该标签具有 icon class:

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 标签之间，则不会应用样式。

添加 svg 图像作为语义输入的图标 UI

Add svg image as icon for Input of Semantic UI

javascript

css

reactjs

svg

semantic-ui