FIX: add icon converter back, update setting (#20)

javascripts/discourse/components/versatile-banner.js

@@ -5,6 +5,7 @@ import { action } from "@ember/object";
 import cookie, { removeCookie } from "discourse/lib/cookie";
 import { defaultHomepage } from "discourse/lib/utilities";
 import I18n from "I18n";
+import { convertIconClass } from "discourse-common/lib/icon-library";
 
 export default class VersatileBanner extends Component {
   @service router;
@@ -27,22 +28,22 @@ export default class VersatileBanner extends Component {
     {
       content: settings.first_column_content,
       class: "first_column",
-      icon: settings.first_column_icon,
+      icon: convertIconClass(settings.first_column_icon),
     },
     {
       content: settings.second_column_content,
       class: "second_column",
-      icon: settings.second_column_icon,
+      icon: convertIconClass(settings.second_column_icon),
     },
     {
       content: settings.third_column_content,
       class: "third_column",
-      icon: settings.third_column_icon,
+      icon: convertIconClass(settings.third_column_icon),
     },
     {
       content: settings.fourth_column_content,
       class: "fourth_column",
-      icon: settings.fourth_column_icon,
+      icon: convertIconClass(settings.fourth_column_icon),
     },
   ];
 

locales/en.yml

@@ -34,4 +34,4 @@ en:
       link_text_color: "The text color of links within the banner."
       link_text_color_dark: "The text color of links within the banner when system dark mode is detected. <br><br><br><h2>Banner Content Customization</h2> Customize the content of the banner with HTML. If you need to style your custom content with CSS, create a separate theme component. Leave the content blank to exclude a column. While a fourth column is provided, it will likely result in too much content for the available space. Be sure you are happy with your configuration across different brower widths."
       fourth_column_content: '<br><br><h2>Column Sizes</h2>Use a percentage to make columns more wide or narrow. When set to "auto", the column will fill the available space evenly with other "auto" columns.'
-      fourth_column_size: '<br><br><h2>Column Icons</h2>Use font awesome or a link to an image for the icon at the top of the columns. Accepted font awesome formats: <b>fa-icon</b>, <b>far fa-icon</b> or <b>fab fa-icon</b>. <a href="https://fontawesome.com/icons?d=gallery&m=free" target="_blank">Click Here</a> to view the list of available icons.'
+      fourth_column_size: '<br><br><h2>Column Icons</h2>Use font awesome or a link to an image for the icon at the top of the columns. <a href="https://fontawesome.com/v5/search?o=r&m=free" target="_blank">Click Here</a> to view the list of available icons.'