@fortawesome/vue-fontawesome 3.0.3 → 3.0.4

package/CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [3.0.4](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.4) - 2023-11-06
+
+### Changed
+
+### Added
+
+- Tests for Sharp Family
+- Ability to include a title prop (github issue #[181](https://github.com/FortAwesome/vue-fontawesome/issues/181))
+- Prettier config file
+
 ---
 
 ## [3.0.3](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.3) - 2023-01-24
@@ -16,7 +26,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
-- Missing TypeScript animations added  (github issue #[428](https://github.com/FortAwesome/vue-fontawesome/issues/428))
+- Missing TypeScript animations added (github issue #[428](https://github.com/FortAwesome/vue-fontawesome/issues/428))
 - Missing TypeScript sizes added (github issue #[415](https://github.com/FortAwesome/vue-fontawesome/issues/415))
 
 ---

package/README.md

@@ -25,6 +25,7 @@
 Official documentation is hosted at fontawesome.com
 
 Helpful Vue links:
+
 - [Add Icons with Vue](https://fontawesome.com/docs/web/use-with/vue/add-icons)
 - [Adding Icon Styling with Vue](https://fontawesome.com/docs/web/use-with/vue/style)
 

package/index.d.ts

@@ -1,4 +1,4 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { DefineComponent } from 'vue'
 
 interface FontAwesomeIconProps {
@@ -7,6 +7,7 @@ interface FontAwesomeIconProps {
   flip?: 'horizontal' | 'vertical' | 'both'
   icon: object | Array<string> | string | IconDefinition
   mask?: object | Array<string> | string
+  maskId?: object | Array<string> | string
   listItem?: boolean
   pull?: 'right' | 'left'
   pulse?: boolean
@@ -17,6 +18,7 @@ interface FontAwesomeIconProps {
   transform?: object | string
   symbol?: boolean | string
   title?: string
+  titleId?: string
   inverse?: boolean
   bounce?: boolean
   shake?: boolean

package/index.es.js

@@ -3,17 +3,14 @@ import { h, defineComponent, computed, watch } from 'vue';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
-
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
     enumerableOnly && (symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
     })), keys.push.apply(keys, symbols);
   }
-
   return keys;
 }
-
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
@@ -23,10 +20,8 @@ function _objectSpread2(target) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
-
   return target;
 }
-
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -36,8 +31,8 @@ function _typeof(obj) {
     return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
   }, _typeof(obj);
 }
-
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -48,35 +43,26 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
-
 function _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
-
   var target = _objectWithoutPropertiesLoose(source, excluded);
-
   var key, i;
-
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
     for (i = 0; i < sourceSymbolKeys.length; i++) {
       key = sourceSymbolKeys[i];
       if (excluded.indexOf(key) >= 0) continue;
@@ -84,22 +70,17 @@ function _objectWithoutProperties(source, excluded) {
       target[key] = source[key];
     }
   }
-
   return target;
 }
-
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
-
 function _arrayWithoutHoles(arr) {
   if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
-
 function _iterableToArray(iter) {
   if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -108,18 +89,28 @@ function _unsupportedIterableToArray(o, minLen) {
   if (n === "Map" || n === "Set") return Array.from(o);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
   return arr2;
 }
-
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -260,12 +251,12 @@ var humps$1 = {exports: {}};
 var humps = humps$1.exports;
 
 var _excluded = ["class", "style"];
+
 /**
  * Converts a CSS style into a plain Javascript object.
  * @param {String} style The style to converts into a plain Javascript object.
  * @returns {Object}
  */
-
 function styleToObject(style) {
   return style.split(';').map(function (s) {
     return s.trim();
@@ -279,19 +270,19 @@ function styleToObject(style) {
     return output;
   }, {});
 }
+
 /**
  * Converts a CSS class list into a plain Javascript object.
  * @param {Array<String>} classes The class list to convert.
  * @returns {Object}
  */
-
-
 function classToObject(classes) {
   return classes.split(/\s+/).reduce(function (output, className) {
     output[className] = true;
     return output;
   }, {});
 }
+
 /**
  * Converts a FontAwesome abstract element of an icon into a Vue VNode.
  * @param {AbstractElement | String} abstractElement The element to convert.
@@ -299,50 +290,44 @@ function classToObject(classes) {
  * @param {Object} attrs The user-defined native HTML attributes.
  * @returns {VNode}
  */
-
-
 function convert(abstractElement) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
   // If the abstract element is a string, we'll just return a string render function
   if (typeof abstractElement === 'string') {
     return abstractElement;
-  } // Converting abstract element children into Vue VNodes
-
+  }
 
+  // Converting abstract element children into Vue VNodes
   var children = (abstractElement.children || []).map(function (child) {
     return convert(child);
-  }); // Converting abstract element attributes into valid Vue format
+  });
 
+  // Converting abstract element attributes into valid Vue format
   var mixins = Object.keys(abstractElement.attributes || {}).reduce(function (mixins, key) {
     var value = abstractElement.attributes[key];
-
     switch (key) {
       case 'class':
         mixins.class = classToObject(value);
         break;
-
       case 'style':
         mixins.style = styleToObject(value);
         break;
-
       default:
         mixins.attrs[key] = value;
     }
-
     return mixins;
   }, {
     attrs: {},
     class: {},
     style: {}
-  }); // Now, we'll return the VNode
+  });
 
+  // Now, we'll return the VNode
   attrs.class;
-      var _attrs$style = attrs.style,
-      aStyle = _attrs$style === void 0 ? {} : _attrs$style,
-      otherAttrs = _objectWithoutProperties(attrs, _excluded);
-
+    var _attrs$style = attrs.style,
+    aStyle = _attrs$style === void 0 ? {} : _attrs$style,
+    otherAttrs = _objectWithoutProperties(attrs, _excluded);
   return h(abstractElement.tag, _objectSpread2(_objectSpread2(_objectSpread2({}, props), {}, {
     class: mixins.class,
     style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle)
@@ -350,15 +335,12 @@ function convert(abstractElement) {
 }
 
 var PRODUCTION = false;
-
 try {
   PRODUCTION = process.env.NODE_ENV === 'production';
 } catch (e) {}
-
 function log () {
   if (!PRODUCTION && console && typeof console.error === 'function') {
     var _console;
-
     (_console = console).error.apply(_console, arguments);
   }
 }
@@ -368,7 +350,6 @@ function objectWithKey(key, value) {
 }
 function classList(props) {
   var _classes;
-
   var classes = (_classes = {
     'fa-spin': props.spin,
     'fa-pulse': props.pulse,
@@ -391,26 +372,21 @@ function normalizeIconArgs(icon) {
   if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
     return icon;
   }
-
   if (parse.icon) {
     return parse.icon(icon);
   }
-
   if (icon === null) {
     return null;
   }
-
   if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) {
     return icon;
   }
-
   if (Array.isArray(icon) && icon.length === 2) {
     return {
       prefix: icon[0],
       iconName: icon[1]
     };
   }
-
   if (typeof icon === 'string') {
     return {
       prefix: 'fas',
@@ -418,7 +394,6 @@ function normalizeIconArgs(icon) {
     };
   }
 }
-
 var FontAwesomeIcon = defineComponent({
   name: 'FontAwesomeIcon',
   props: {
@@ -445,6 +420,10 @@ var FontAwesomeIcon = defineComponent({
       type: [Object, Array, String],
       default: null
     },
+    maskId: {
+      type: String,
+      default: null
+    },
     listItem: {
       type: Boolean,
       default: false
@@ -494,6 +473,10 @@ var FontAwesomeIcon = defineComponent({
       type: String,
       default: null
     },
+    titleId: {
+      type: String,
+      default: null
+    },
     inverse: {
       type: Boolean,
       default: false
@@ -548,7 +531,9 @@ var FontAwesomeIcon = defineComponent({
     var renderedIcon = computed(function () {
       return icon(icon$1.value, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes.value), transform.value), mask.value), {}, {
         symbol: props.symbol,
-        title: props.title
+        title: props.title,
+        titleId: props.titleId,
+        maskId: props.maskId
       }));
     });
     watch(renderedIcon, function (value) {
@@ -623,12 +608,10 @@ var FontAwesomeLayersText = defineComponent({
     });
     var abstractElement = computed(function () {
       var _text = text(props.value.toString(), _objectSpread2(_objectSpread2({}, transform.value), classes.value)),
-          abstract = _text.abstract;
-
+        abstract = _text.abstract;
       if (props.counter) {
         abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '');
       }
-
       return abstract[0];
     });
     var vnode = computed(function () {

package/index.js

@@ -6,17 +6,14 @@
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
-
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
       enumerableOnly && (symbols = symbols.filter(function (sym) {
         return Object.getOwnPropertyDescriptor(object, sym).enumerable;
       })), keys.push.apply(keys, symbols);
     }
-
     return keys;
   }
-
   function _objectSpread2(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = null != arguments[i] ? arguments[i] : {};
@@ -26,10 +23,8 @@
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
-
     return target;
   }
-
   function _typeof(obj) {
     "@babel/helpers - typeof";
 
@@ -39,8 +34,8 @@
       return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
     }, _typeof(obj);
   }
-
   function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value: value,
@@ -51,35 +46,26 @@
     } else {
       obj[key] = value;
     }
-
     return obj;
   }
-
   function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
     var key, i;
-
     for (i = 0; i < sourceKeys.length; i++) {
       key = sourceKeys[i];
       if (excluded.indexOf(key) >= 0) continue;
       target[key] = source[key];
     }
-
     return target;
   }
-
   function _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
-
     var target = _objectWithoutPropertiesLoose(source, excluded);
-
     var key, i;
-
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
       for (i = 0; i < sourceSymbolKeys.length; i++) {
         key = sourceSymbolKeys[i];
         if (excluded.indexOf(key) >= 0) continue;
@@ -87,22 +73,17 @@
         target[key] = source[key];
       }
     }
-
     return target;
   }
-
   function _toConsumableArray(arr) {
     return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
   }
-
   function _arrayWithoutHoles(arr) {
     if (Array.isArray(arr)) return _arrayLikeToArray(arr);
   }
-
   function _iterableToArray(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
   }
-
   function _unsupportedIterableToArray(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -111,18 +92,28 @@
     if (n === "Map" || n === "Set") return Array.from(o);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
   }
-
   function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
-
     for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
     return arr2;
   }
-
   function _nonIterableSpread() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
+  function _toPrimitive(input, hint) {
+    if (typeof input !== "object" || input === null) return input;
+    var prim = input[Symbol.toPrimitive];
+    if (prim !== undefined) {
+      var res = prim.call(input, hint || "default");
+      if (typeof res !== "object") return res;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+  function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, "string");
+    return typeof key === "symbol" ? key : String(key);
+  }
 
   var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -263,12 +254,12 @@
   var humps = humps$1.exports;
 
   var _excluded = ["class", "style"];
+
   /**
    * Converts a CSS style into a plain Javascript object.
    * @param {String} style The style to converts into a plain Javascript object.
    * @returns {Object}
    */
-
   function styleToObject(style) {
     return style.split(';').map(function (s) {
       return s.trim();
@@ -282,19 +273,19 @@
       return output;
     }, {});
   }
+
   /**
    * Converts a CSS class list into a plain Javascript object.
    * @param {Array<String>} classes The class list to convert.
    * @returns {Object}
    */
-
-
   function classToObject(classes) {
     return classes.split(/\s+/).reduce(function (output, className) {
       output[className] = true;
       return output;
     }, {});
   }
+
   /**
    * Converts a FontAwesome abstract element of an icon into a Vue VNode.
    * @param {AbstractElement | String} abstractElement The element to convert.
@@ -302,50 +293,44 @@
    * @param {Object} attrs The user-defined native HTML attributes.
    * @returns {VNode}
    */
-
-
   function convert(abstractElement) {
     var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
     // If the abstract element is a string, we'll just return a string render function
     if (typeof abstractElement === 'string') {
       return abstractElement;
-    } // Converting abstract element children into Vue VNodes
-
+    }
 
+    // Converting abstract element children into Vue VNodes
     var children = (abstractElement.children || []).map(function (child) {
       return convert(child);
-    }); // Converting abstract element attributes into valid Vue format
+    });
 
+    // Converting abstract element attributes into valid Vue format
     var mixins = Object.keys(abstractElement.attributes || {}).reduce(function (mixins, key) {
       var value = abstractElement.attributes[key];
-
       switch (key) {
         case 'class':
           mixins.class = classToObject(value);
           break;
-
         case 'style':
           mixins.style = styleToObject(value);
           break;
-
         default:
           mixins.attrs[key] = value;
       }
-
       return mixins;
     }, {
       attrs: {},
       class: {},
       style: {}
-    }); // Now, we'll return the VNode
+    });
 
+    // Now, we'll return the VNode
     attrs.class;
-        var _attrs$style = attrs.style,
-        aStyle = _attrs$style === void 0 ? {} : _attrs$style,
-        otherAttrs = _objectWithoutProperties(attrs, _excluded);
-
+      var _attrs$style = attrs.style,
+      aStyle = _attrs$style === void 0 ? {} : _attrs$style,
+      otherAttrs = _objectWithoutProperties(attrs, _excluded);
     return vue.h(abstractElement.tag, _objectSpread2(_objectSpread2(_objectSpread2({}, props), {}, {
       class: mixins.class,
       style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle)
@@ -353,15 +338,12 @@
   }
 
   var PRODUCTION = false;
-
   try {
     PRODUCTION = process.env.NODE_ENV === 'production';
   } catch (e) {}
-
   function log () {
     if (!PRODUCTION && console && typeof console.error === 'function') {
       var _console;
-
       (_console = console).error.apply(_console, arguments);
     }
   }
@@ -371,7 +353,6 @@
   }
   function classList(props) {
     var _classes;
-
     var classes = (_classes = {
       'fa-spin': props.spin,
       'fa-pulse': props.pulse,
@@ -394,26 +375,21 @@
     if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
       return icon;
     }
-
     if (fontawesomeSvgCore.parse.icon) {
       return fontawesomeSvgCore.parse.icon(icon);
     }
-
     if (icon === null) {
       return null;
     }
-
     if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) {
       return icon;
     }
-
     if (Array.isArray(icon) && icon.length === 2) {
       return {
         prefix: icon[0],
         iconName: icon[1]
       };
     }
-
     if (typeof icon === 'string') {
       return {
         prefix: 'fas',
@@ -421,7 +397,6 @@
       };
     }
   }
-
   var FontAwesomeIcon = vue.defineComponent({
     name: 'FontAwesomeIcon',
     props: {
@@ -448,6 +423,10 @@
         type: [Object, Array, String],
         default: null
       },
+      maskId: {
+        type: String,
+        default: null
+      },
       listItem: {
         type: Boolean,
         default: false
@@ -497,6 +476,10 @@
         type: String,
         default: null
       },
+      titleId: {
+        type: String,
+        default: null
+      },
       inverse: {
         type: Boolean,
         default: false
@@ -551,7 +534,9 @@
       var renderedIcon = vue.computed(function () {
         return fontawesomeSvgCore.icon(icon.value, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes.value), transform.value), mask.value), {}, {
           symbol: props.symbol,
-          title: props.title
+          title: props.title,
+          titleId: props.titleId,
+          maskId: props.maskId
         }));
       });
       vue.watch(renderedIcon, function (value) {
@@ -626,12 +611,10 @@
       });
       var abstractElement = vue.computed(function () {
         var _text = fontawesomeSvgCore.text(props.value.toString(), _objectSpread2(_objectSpread2({}, transform.value), classes.value)),
-            abstract = _text.abstract;
-
+          abstract = _text.abstract;
         if (props.counter) {
           abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '');
         }
-
         return abstract[0];
       });
       var vnode = vue.computed(function () {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fortawesome/vue-fontawesome",
   "description": "Official Vue component for Font Awesome 6",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "main": "index.js",
   "files": [
     "README.md",
@@ -67,24 +67,26 @@
     "@babel/preset-env": "^7.18.2",
     "@fortawesome/fontawesome-svg-core": "~6",
     "@fortawesome/free-solid-svg-icons": "^6",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@vue/test-utils": "^2.0.0-beta.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^28.1.1",
     "concurrently": "^7.2.1",
     "cross-env": "^7.0.3",
     "humps": "^2.0.1",
     "husky": "^8.0.1",
+    "install": "^0.13.0",
     "jest": "^28.1.1",
     "jest-environment-jsdom": "^28.1.1",
     "lint-staged": "^13.0.0",
     "markdown-toc": "^1.2.0",
+    "npm": "^10.2.2",
+    "prettier": "^3.0.3",
     "rollup": "^2.75.6",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@vue/test-utils": "^2.0.0-beta.2",
     "vue": "^3"
   },
-  "dependencies": {},
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"

package/src/components/FontAwesomeIcon.js

@@ -4,7 +4,7 @@ import convert from '../converter'
 import log from '../logger'
 import { objectWithKey, classList } from '../utils'
 
-function normalizeIconArgs (icon) {
+function normalizeIconArgs(icon) {
   if (icon && typeof icon === 'object' && icon.prefix && icon.iconName && icon.icon) {
     return icon
   }
@@ -55,6 +55,10 @@ export default defineComponent({
       type: [Object, Array, String],
       default: null
     },
+    maskId: {
+      type: String,
+      default: null
+    },
     listItem: {
       type: Boolean,
       default: false
@@ -98,6 +102,10 @@ export default defineComponent({
       type: String,
       default: null
     },
+    titleId: {
+      type: String,
+      default: null
+    },
     inverse: {
       type: Boolean,
       default: false
@@ -133,35 +141,38 @@ export default defineComponent({
     spinReverse: {
       type: Boolean,
       default: false
-    },
+    }
   },
 
-  setup (props, { attrs }) {
+  setup(props, { attrs }) {
     const icon = computed(() => normalizeIconArgs(props.icon))
     const classes = computed(() => objectWithKey('classes', classList(props)))
-    const transform = computed(() => objectWithKey(
-      'transform',
-      (typeof props.transform === 'string')
-        ? faParse.transform(props.transform)
-        : props.transform
-    ))
+    const transform = computed(() => objectWithKey('transform', typeof props.transform === 'string' ? faParse.transform(props.transform) : props.transform))
     const mask = computed(() => objectWithKey('mask', normalizeIconArgs(props.mask)))
 
-    const renderedIcon = computed(() => faIcon(icon.value, {
-      ...classes.value,
-      ...transform.value,
-      ...mask.value,
-      symbol: props.symbol,
-      title: props.title
-    }))
+    const renderedIcon = computed(() =>
+      faIcon(icon.value, {
+        ...classes.value,
+        ...transform.value,
+        ...mask.value,
+        symbol: props.symbol,
+        title: props.title,
+        titleId: props.titleId,
+        maskId: props.maskId
+      })
+    )
 
-    watch(renderedIcon, (value) => {
-      if (!value) {
-        return log('Could not find one or more icon(s)', icon.value, mask.value)
-      }
-    }, { immediate: true })
+    watch(
+      renderedIcon,
+      (value) => {
+        if (!value) {
+          return log('Could not find one or more icon(s)', icon.value, mask.value)
+        }
+      },
+      { immediate: true }
+    )
 
-    const vnode = computed(() => renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null)
+    const vnode = computed(() => (renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null))
     return () => vnode.value
   }
 })