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

【问题标题】：Add svg image as icon for Input of Semantic UI添加 svg 图像作为语义 UI 输入的图标
【发布时间】：2020-12-20 18:40:50
【问题描述】：

我正在使用语义 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添加后样式没有变化，为什么和原来的图标位置不一样？

【问题讨论】：

标签： javascript css reactjs svg semantic-ui

【解决方案1】：

当我们通过属性“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;
}

【讨论】：

最好也将css放在答案中，以防链接失效

【解决方案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 标签之间包装图像，则不会应用样式。

【讨论】：