Using Bulma: A little branding for your brand inputs

brandIcon.js

{
  getters: {
    brandIcon() {
      return (text, defaultIcon) => {
        const isBrand = brandIcons.includes(text.toLowerCase());
        if (isBrand) {
          return `fa-${text.toLowerCase()}`;
        }
        return `fa-${defaultIcon}`;
      };
    }
  }
}

icons.js

const brandIcons = [
  "500px",
  "accessible-icon",
  "accusoft",
  "acquisitions-incorporated",
  "adn",
  "adobe",
  "adversal",
  "affiliatetheme",
  "airbnb",
  "algolia",
  "alipay",
  "amazon",
  "amazon-pay",
  "amilia",
  "android",
  "angellist",
  "angrycreative",
  "angular",
  "apper",
  "apple",
  "apple-pay",
  "app-store",
  "app-store-ios",
  "artstation",
  "asymmetrik",
  "atlassian",
  "audible",
  "autoprefixer",
  "avianex",
  "aviato",
  "aws",
  "bandcamp",
  "battle-net",
  "behance",
  "behance-square",
  "bimobject",
  "bitbucket",
  "bitcoin",
  "bity",
  "blackberry",
  "black-tie",
  "blogger",
  "blogger-b",
  "bluetooth",
  "bluetooth-b",
  "bootstrap",
  "btc",
  "buffer",
  "buromobelexperte",
  "buysellads",
  "canadian-maple-leaf",
  "cc-amazon-pay",
  "cc-amex",
  "cc-apple-pay",
  "cc-diners-club",
  "cc-discover",
  "cc-jcb",
  "cc-mastercard",
  "cc-paypal",
  "cc-stripe",
  "cc-visa",
  "centercode",
  "centos",
  "chrome",
  "chromecast",
  "cloudscale",
  "cloudsmith",
  "cloudversify",
  "codepen",
  "codiepie",
  "confluence",
  "connectdevelop",
  "contao",
  "cpanel",
  "creative-commons",
  "creative-commons-by",
  "creative-commons-nc",
  "creative-commons-nc-eu",
  "creative-commons-nc-jp",
  "creative-commons-nd",
  "creative-commons-pd",
  "creative-commons-pd-alt",
  "creative-commons-remix",
  "creative-commons-sa",
  "creative-commons-sampling",
  "creative-commons-sampling-plus",
  "creative-commons-share",
  "creative-commons-zero",
  "critical-role",
  "css3",
  "css3-alt",
  "cuttlefish",
  "d-and-d",
  "d-and-d-beyond",
  "dashcube",
  "delicious",
  "deploydog",
  "deskpro",
  "dev",
  "deviantart",
  "dhl",
  "diaspora",
  "digg",
  "digital-ocean",
  "discord",
  "discourse",
  "dochub",
  "docker",
  "draft2digital",
  "dribbble",
  "dribbble-square",
  "dropbox",
  "drupal",
  "dyalog",
  "earlybirds",
  "ebay",
  "edge",
  "elementor",
  "ello",
  "ember",
  "empire",
  "envira",
  "erlang",
  "ethereum",
  "etsy",
  "evernote",
  "expeditedssl",
  "facebook",
  "facebook-f",
  "facebook-messenger",
  "facebook-square",
  "fantasy-flight-games",
  "fedex",
  "fedora",
  "figma",
  "firefox",
  "firstdraft",
  "first-order",
  "first-order-alt",
  "flickr",
  "flipboard",
  "fly",
  "font-awesome",
  "font-awesome-alt",
  "font-awesome-flag",
  "font-awesome-logo-full",
  "fonticons",
  "fonticons-fi",
  "fort-awesome",
  "fort-awesome-alt",
  "forumbee",
  "foursquare",
  "freebsd",
  "free-code-camp",
  "fulcrum",
  "galactic-republic",
  "galactic-senate",
  "get-pocket",
  "gg",
  "gg-circle",
  "git",
  "github",
  "github-alt",
  "github-square",
  "gitkraken",
  "gitlab",
  "git-square",
  "gitter",
  "glide",
  "glide-g",
  "gofore",
  "goodreads",
  "goodreads-g",
  "google",
  "google-drive",
  "google-play",
  "google-plus",
  "google-plus-g",
  "google-plus-square",
  "google-wallet",
  "gratipay",
  "grav",
  "gripfire",
  "grunt",
  "gulp",
  "hacker-news",
  "hacker-news-square",
  "hackerrank",
  "hips",
  "hire-a-helper",
  "hooli",
  "hornbill",
  "hotjar",
  "houzz",
  "html5",
  "hubspot",
  "imdb",
  "instagram",
  "intercom",
  "internet-explorer",
  "invision",
  "ioxhost",
  "itch-io",
  "itunes",
  "itunes-note",
  "java",
  "jedi-order",
  "jenkins",
  "jira",
  "joget",
  "joomla",
  "js",
  "jsfiddle",
  "js-square",
  "kaggle",
  "keybase",
  "keycdn",
  "kickstarter",
  "kickstarter-k",
  "korvue",
  "laravel",
  "lastfm",
  "lastfm-square",
  "leanpub",
  "less",
  "line",
  "linkedin",
  "linkedin-in",
  "linode",
  "linux",
  "lyft",
  "magento",
  "mailchimp",
  "mandalorian",
  "markdown",
  "mastodon",
  "maxcdn",
  "medapps",
  "medium",
  "medium-m",
  "medrt",
  "meetup",
  "megaport",
  "mendeley",
  "microsoft",
  "mix",
  "mixcloud",
  "mizuni",
  "modx",
  "monero",
  "napster",
  "neos",
  "nimblr",
  "nintendo-switch",
  "node",
  "node-js",
  "npm",
  "ns8",
  "nutritionix",
  "odnoklassniki",
  "odnoklassniki-square",
  "old-republic",
  "opencart",
  "openid",
  "opera",
  "optin-monster",
  "osi",
  "page4",
  "pagelines",
  "palfed",
  "patreon",
  "paypal",
  "penny-arcade",
  "periscope",
  "phabricator",
  "phoenix-framework",
  "phoenix-squadron",
  "php",
  "pied-piper",
  "pied-piper-alt",
  "pied-piper-hat",
  "pied-piper-pp",
  "pinterest",
  "pinterest-p",
  "pinterest-square",
  "playstation",
  "product-hunt",
  "pushed",
  "python",
  "qq",
  "quinscape",
  "quora",
  "raspberry-pi",
  "ravelry",
  "react",
  "reacteurope",
  "readme",
  "rebel",
  "reddit",
  "reddit-alien",
  "reddit-square",
  "redhat",
  "red-river",
  "renren",
  "replyd",
  "researchgate",
  "resolving",
  "rev",
  "rocketchat",
  "rockrms",
  "r-project",
  "safari",
  "salesforce",
  "sass",
  "schlix",
  "scribd",
  "searchengin",
  "sellcast",
  "sellsy",
  "servicestack",
  "shirtsinbulk",
  "shopware",
  "simplybuilt",
  "sistrix",
  "sith",
  "sketch",
  "skyatlas",
  "skype",
  "slack",
  "slack-hash",
  "slideshare",
  "snapchat",
  "snapchat-ghost",
  "snapchat-square",
  "soundcloud",
  "sourcetree",
  "speakap",
  "speaker-deck",
  "spotify",
  "squarespace",
  "stack-exchange",
  "stack-overflow",
  "staylinked",
  "steam",
  "steam-square",
  "steam-symbol",
  "sticker-mule",
  "strava",
  "stripe",
  "stripe-s",
  "studiovinari",
  "stumbleupon",
  "stumbleupon-circle",
  "superpowers",
  "supple",
  "suse",
  "symfony",
  "teamspeak",
  "telegram",
  "telegram-plane",
  "tencent-weibo",
  "themeco",
  "themeisle",
  "the-red-yeti",
  "think-peaks",
  "trade-federation",
  "trello",
  "tripadvisor",
  "tumblr",
  "tumblr-square",
  "twitch",
  "twitter",
  "twitter-square",
  "typo3",
  "uber",
  "ubuntu",
  "uikit",
  "uniregistry",
  "untappd",
  "ups",
  "usb",
  "usps",
  "ussunnah",
  "vaadin",
  "viacoin",
  "viadeo",
  "viadeo-square",
  "viber",
  "vimeo",
  "vimeo-square",
  "vimeo-v",
  "vine",
  "vk",
  "vnv",
  "vuejs",
  "waze",
  "weebly",
  "weibo",
  "weixin",
  "whatsapp",
  "whatsapp-square",
  "whmcs",
  "wikipedia-w",
  "windows",
  "wix",
  "wizards-of-the-coast",
  "wolf-pack-battalion",
  "wordpress",
  "wordpress-simple",
  "wpbeginner",
  "wpexplorer",
  "wpforms",
  "wpressr",
  "xbox",
  "xing",
  "xing-square",
  "yahoo",
  "yammer",
  "yandex",
  "yandex-international",
  "yarn",
  "y-combinator",
  "yelp",
  "yoast",
  "youtube",
  "youtube-square",
  "zhihu"
];

export { brandIcons };

login.vue

<div class="field">
  <label class="label">Login</label>
  <div class="control">
    <p class="control has-icons-left">
      <input
        class="input is-small"
        :disabled="creating"
        v-model="login"
        type="text"
        placeholder="Login"
      />
      <span class="icon is-small is-left">
        <i class="fa" :class="brandIcon(login, 'desktop')"></i>
      </span>
    </p>
  </div>
</div>