Fix: #184 アンテナ編集画面のアイコン (#187)

app/javascript/mastodon/features/antenna_setting/components/text_list.jsx

@@ -6,6 +6,8 @@ import { injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
+import { ReactComponent as DeleteIcon } from '@material-symbols/svg-600/outlined/delete.svg';
+
 import { Button } from 'mastodon/components/button';
 import { Icon } from 'mastodon/components/icon';
 import { IconButton } from 'mastodon/components/icon_button';
@@ -14,6 +16,7 @@ class TextListItem extends PureComponent {
 
   static propTypes = {
     icon: PropTypes.string.isRequired,
+    iconComponent: PropTypes.object.isRequired,
     value: PropTypes.string.isRequired,
     onRemove: PropTypes.func.isRequired,
   };
@@ -23,13 +26,13 @@ class TextListItem extends PureComponent {
   };
 
   render () {
-    const { icon, value } = this.props;
+    const { icon, iconComponent, value } = this.props;
 
     return (
       <div className='setting-text-list-item'>
-        <Icon id={icon} />
+        <Icon id={icon} icon={iconComponent} />
         <span className='label'>{value}</span>
-        <IconButton icon='trash' onClick={this.handleRemove} />
+        <IconButton icon='trash' iconComponent={DeleteIcon} onClick={this.handleRemove} />
       </div>
     );
   }
@@ -44,6 +47,7 @@ class TextList extends PureComponent {
     disabled: PropTypes.bool,
     intl: PropTypes.object.isRequired,
     icon: PropTypes.string.isRequired,
+    iconComponent: PropTypes.object.isRequired,
     label: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
@@ -65,12 +69,12 @@ class TextList extends PureComponent {
   };
 
   render () {
-    const { icon, value, values, disabled, label, title } = this.props;
+    const { icon, iconComponent, value, values, disabled, label, title } = this.props;
 
     return (
       <div className='setting-text-list'>
         {values.map((val) => (
-          <TextListItem key={val} value={val} icon={icon} onRemove={this.props.onRemove} />
+          <TextListItem key={val} value={val} icon={icon} iconComponent={iconComponent} onRemove={this.props.onRemove} />
         ))}
 
         <form className='add-text-form' onSubmit={this.handleSubmit}>

app/javascript/mastodon/features/antenna_setting/index.jsx

@@ -12,7 +12,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
 import { ReactComponent as DeleteIcon } from '@material-symbols/svg-600/outlined/delete.svg';
+import { ReactComponent as DomainIcon } from '@material-symbols/svg-600/outlined/dns.svg';
 import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
+import { ReactComponent as HashtagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import { ReactComponent as KeywordIcon } from '@material-symbols/svg-600/outlined/title.svg';
 import { ReactComponent as AntennaIcon } from '@material-symbols/svg-600/outlined/wifi.svg';
 import Select, { NonceProvider } from 'react-select';
 import Toggle from 'react-toggle';
@@ -473,6 +476,7 @@ class AntennaSetting extends PureComponent {
                   value={this.state.domainName}
                   values={domains.get('domains') || ImmutableList()}
                   icon='sitemap'
+                  iconComponent={DomainIcon}
                   label={intl.formatMessage(messages.addDomainLabel)}
                   title={intl.formatMessage(messages.addDomainTitle)}
                 />
@@ -490,6 +494,7 @@ class AntennaSetting extends PureComponent {
                   value={this.state.tagName}
                   values={tags.get('tags') || ImmutableList()}
                   icon='hashtag'
+                  iconComponent={HashtagIcon}
                   label={intl.formatMessage(messages.addTagLabel)}
                   title={intl.formatMessage(messages.addTagTitle)}
                 />
@@ -503,6 +508,7 @@ class AntennaSetting extends PureComponent {
                   value={this.state.keywordName}
                   values={keywords.get('keywords') || ImmutableList()}
                   icon='paragraph'
+                  iconComponent={KeywordIcon}
                   label={intl.formatMessage(messages.addKeywordLabel)}
                   title={intl.formatMessage(messages.addKeywordTitle)}
                 />
@@ -521,6 +527,7 @@ class AntennaSetting extends PureComponent {
                 value={this.state.excludeDomainName}
                 values={domains.get('exclude_domains') || ImmutableList()}
                 icon='sitemap'
+                iconComponent={DomainIcon}
                 label={intl.formatMessage(messages.addDomainLabel)}
                 title={intl.formatMessage(messages.addDomainTitle)}
               />
@@ -532,6 +539,7 @@ class AntennaSetting extends PureComponent {
                 value={this.state.excludeKeywordName}
                 values={keywords.get('exclude_keywords') || ImmutableList()}
                 icon='paragraph'
+                iconComponent={KeywordIcon}
                 label={intl.formatMessage(messages.addKeywordLabel)}
                 title={intl.formatMessage(messages.addKeywordTitle)}
               />
@@ -543,6 +551,7 @@ class AntennaSetting extends PureComponent {
                 value={this.state.excludeTagName}
                 values={tags.get('exclude_tags') || ImmutableList()}
                 icon='hashtag'
+                iconComponent={HashtagIcon}
                 label={intl.formatMessage(messages.addTagLabel)}
                 title={intl.formatMessage(messages.addTagTitle)}
               />