有什么方法可以通过Semantic-UI获得动态图标？

Question

I have this Icon from Semantic-UI with React

<Icon name={`idea ${words}`} /> where words can be any string of words based on user input. Is there a way to get this to not error out? I'm getting errors like these right now

Warning: Failed prop type: Invalid prop `name` of value `user github` supplied 
to `Icon`.

Instead of `user github`, did you mean:
  - user
  - users
  - github

where it looks like it only wants one word but I want it to be able to take multiple.

Is there a way for when the Icon loads to display the trophy icon, but when people input a word that matches an Icon in Semantic-UI's library it switches to that one? And when they delete that word(s) it should fall back to the trophy icon.

Thanks!

Answer 1

The error is due to the test by propTypes . It should not happen in production as React disables it there automatically, but it shows up in development to warn you about passing wrong prop.

If you want to make sure the input is a valid prop, a workaround is checking words to make sure it exists in the provided icons by semantic-ui.

You can get a list of icons by importing it like this: import {ALL_ICONS_IN_ALL_CONTEXTS} from 'semantic-ui-react/src/lib/SUI';

ALL_ICONS_IN_ALL_CONTEXTS is an array of icon names, so just check and see if the passed name is in that array.

Answer 2

This might have not been the best way to do it, but this is what I did. First I added an ID to each Icon I wanted to be dynamic.

<Icon ... id={`...-${index}`} color="teal" name={`${DEFAULT_ICON}`} />

next, I subscribed the input field to an onChange event and did this.

const val = e.target.value; (Value of the Input Field)
let icon = `${DEFAULT_ICON}`; (Whatever you want the fallback icon to be
let words = val.split(' ');

for (let i = 0; i < words.length; i++) {
  let word = words[i];
  if (ALL_ICONS_IN_ALL_CONTEXTS.indexOf(word.toLowerCase()) > -1) {
    icon = word;
  }
}
$(`#...-${index}`)[0].className = `teal icon ${icon}`;

Keep in mind this solution requires these two imports.

import { ALL_ICONS_IN_ALL_CONTEXTS } from 'semantic-ui-react/dist/commonjs/lib/SUI';
import $ from 'jquery';

This solution also takes the last valid word, so if the input field contains "idea wizard", it will use the wizard icon.