@mozaic-ds/icons-vue 0.0.1-beta.0 → 0.1.0-beta.0

package/.github/CODEOWNERS

@@ -0,0 +1,8 @@
+# CODEOWNERS
+# Each line is a file pattern followed by one or more owners.
+
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# @adeo/adeo-design-system will be requested for
+# review when someone opens a pull request.
+*       @adeo/adeo-design-system

package/.github/ISSUE_TEMPLATE/BUG-REPORT.yml

@@ -0,0 +1,102 @@
+name: 🐞 Bug Report
+description: Report a bug
+labels: ['bug']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Hi there! :wave: :smiley:
+        Thanks for taking the time to fill out this bug report!
+
+        > To expedite issue processing please search open and closed issues before submitting a new one.
+  - type: dropdown
+    id: about
+    attributes:
+      label: I am opening an issue for
+      options:
+        - New icons
+        - Existing icons
+    validations:
+      required: true
+  - type: input
+    id: ads-icons-version
+    attributes:
+      label: Version of ADS-Icons
+      description: Which version of ADS-Icons is affected?
+      placeholder: ex. @mozaic-ds/icons@2.0.0
+    validations:
+      required: true
+  - type: checkboxes
+    id: regression
+    attributes:
+      label: Is this a regression?
+      description: Did this behavior use to work in the previous version?
+      options:
+        - label: 'Yes'
+        - label: 'No'
+        - label: "I don't know"
+    validations:
+      required: true
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      placeholder: A clear and concise description of what the bug is.
+    validations:
+      required: true
+  - type: input
+    id: github-repository
+    attributes:
+      label: Github repository
+      description: To better help you, please indicate the url of your GitHub repo
+      placeholder: ex. https://github.com/adeo/ads-icons
+    validations:
+      required: true
+  - type: input
+    id: mockups
+    attributes:
+      label: Mock-up(s)
+      description: Please, indicate the URL of your Figma mock-up to give us more context.
+      placeholder: e.g., https://www.figma.com/file/b09kkFmjlH6RnLEDF2vppS/%5BBA%5D-Button-%F0%9F%9F%A2?node-id=0%3A1
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: Tell us, what's happening?
+      placeholder: |
+        Tell us what you see.
+
+        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+  - type: textarea
+    id: what-expected
+    attributes:
+      label: What is expected?
+      description: Tell us, what did you expect to happen?
+      placeholder: Describe the expected outcome.
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: To Reproduce
+      description: Steps to reproduce the issue.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+
+        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+  - type: textarea
+    id: code
+    attributes:
+      label: Code example
+      description: Copy here the concerned code or an example of code. _(Consider using Stackbliz, Codepen or CodeSandbox to provide a testable code example.)_
+      render: HTML
+  - type: textarea
+    id: additional-comments
+    attributes:
+      label: Additional comments
+      description: Add any other comments about the problem here.
+      placeholder: |
+        Is this a browser specific issue? If so, please specify the browser and version.
+        Do you have specific setup for sketch, plugins, etc.
+        Do any of these matter: operating system, IDE, package manager, HTTP server, ...?

package/.github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml

@@ -0,0 +1,27 @@
+name: 🚀 Feature request
+description: Suggest an idea for this project
+labels: [':rocket: feat']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Hi there! :wave: :smiley:
+        Thank you for taking the time to fill out this feature request and helping us expand/improve the Design System!
+
+        > To expedite issue processing please search open and closed issues before submitting a new one.
+  - type: dropdown
+    id: about
+    attributes:
+      label: I want to propose an evolution/improvement on
+      options:
+        - New icons
+        - Existing icons
+    validations:
+      required: true
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      placeholder: A clear and concise description of the issue or what you are missing.
+    validations:
+      required: true

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,28 @@
+## I have read [the contributing guidelines](https://mozaic.adeo.cloud/contributing/)
+
+- [ ] Yes
+- [ ] No
+
+## Does this PR introduce a breaking change?
+
+read [What is a breaking change ?](https://mozaic.adeo.cloud/contributing/developers/git-conventions/#breaking-changes-)
+
+- [ ] Yes
+- [ ] No
+
+## Have you written a story about your changes?
+
+- [ ] Yes
+- [ ] No
+
+## Describe the changes
+
+<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
+
+## GitHub issue number _(or Jira issue URL)_
+
+<!-- Please indicate a link or a number related to the issue or the Jira concerned. -->
+
+## Other information
+
+<!-- Add any other comments or anything else relevant about your request here. -->

package/.release-it.json

@@ -0,0 +1,21 @@
+{
+  "git": {
+    "requireBranch": ["main", "beta", "beta/*", "chore", "chore/*", "next"],
+    "requireCommits": true,
+    "commitMessage": "chore(release): publish v${version}"
+  },
+  "npm": {
+    "publish": false
+  },
+  "github": {
+    "release": true,
+    "releaseName": "v${version}",
+    "skipChecks": false
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "angular",
+      "infile": "CHANGELOG.md"
+    }
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+
+
+# 0.1.0-beta.0 (2024-03-06)
+
+
+### Features
+
+* **compiler:** new compiler based on new ads-icons ([45142a9](https://github.com/adeo/ads-icons-vue/commit/45142a97a0a35428078d9ad47ce27721c73026db))
+* **icons:** add index for each components ([ed41659](https://github.com/adeo/ads-icons-vue/commit/ed416590332dcb034da8d1ff7b3eaf465a0ade1f))
+* **icons:** export all components ([94ec297](https://github.com/adeo/ads-icons-vue/commit/94ec297fa9214e4b17003093abee408f556b767f))
+* **icons:** update names and add comment ([f6c79d2](https://github.com/adeo/ads-icons-vue/commit/f6c79d2b081c4457abaf028bab38c8054c4e8a9b))
+* **init:** first vue icons ([aed6261](https://github.com/adeo/ads-icons-vue/commit/aed6261aed972afbb3ba1110ebb486fd9c4d4585))
+* **initial:** first commit ([319a2e6](https://github.com/adeo/ads-icons-vue/commit/319a2e6c39070f1d19dffeaa11a94b7fd110a693))

package/icons-builder/component-generator/index.js

@@ -0,0 +1,63 @@
+const fs = require("fs").promises;
+const path = require("path");
+const templateVue = require("./vue-template");
+const { createComponentName } = require("../utils/tools");
+
+
+/**
+ * Asynchronously generates Vue component files for a given array of icons. Each icon's data
+ * is used to create a Vue component file and an index.js file for exports. It also aggregates
+ * all component import statements into a single 'icons.js' file.
+ *
+ * @async
+ * @param {Array<{file: string, data: string}>} icons - An array of objects representing icons,
+ * each containing the 'file' name and the 'data' as a UTF-8 string.
+ * @throws {Error} Throws an error if there is an issue creating directories, writing files,
+ * or during any part of the file generation process.
+ * @returns {Promise<void>} A promise that resolves when all Vue components have been successfully
+ * generated and import statements have been aggregated and written to 'icons.js'.
+ */
+const generateVueComponent = async (icons) => {
+  try {
+    // Aggregate import statements
+    let importStatements = "";
+
+    for (const icon of icons) {
+      if (!icon.file) {
+        continue;
+      }
+
+      const parsedName = createComponentName(icon.file);
+      importStatements += `export { ${parsedName} } from './components/${parsedName}';\n`;
+
+      const dataVue = templateVue(icon);
+      const dataIndex = `import ${parsedName} from './${parsedName}.vue';
+export { ${parsedName} };`;
+
+      const componentDir = path.join(
+        process.cwd(),
+        `${path.relative(process.cwd(), "src/components")}/${parsedName}`
+      );
+      await fs.mkdir(componentDir, { recursive: true });
+
+      const writePath = path.join(componentDir, `${parsedName}.vue`);
+      const writePathIndex = path.join(componentDir, "index.js");
+
+      await fs.writeFile(writePath, dataVue, "utf8");
+      await fs.writeFile(writePathIndex, dataIndex, "utf8");
+    }
+
+    // Write aggregated import statements to icons.js
+    const writeIndex = path.join(
+      process.cwd(),
+      path.relative(process.cwd(), "src/components"),
+      "icons.js"
+    );
+    await fs.appendFile(writeIndex, importStatements, "utf8");
+  } catch (err) {
+    console.error(`✗ ERROR : ${err}`);
+    throw err; // Rethrow or handle error as needed
+  }
+};
+
+module.exports = generateVueComponent;

package/icons-builder/component-generator/vue-template.js

@@ -0,0 +1,66 @@
+const { parse } = require("svg-parser");
+const { createComponentName, convertPxToRem } = require("../utils/tools");
+
+/**
+ * Generates a Vue component template string from an icon object containing the file name and SVG data.
+ * The function parses the SVG data to inject dynamic properties such as width, height (based on the file name),
+ * and fill color. It constructs a Vue component with these dynamic properties and returns the component as a string.
+ *
+ * @param {Object} icon - An object containing the 'file' name and SVG 'data' of an icon.
+ * @param {string} icon.file - The file name of the icon, used to derive the component name and size.
+ * @param {string} icon.data - The raw SVG data of the icon.
+ * @returns {string|null} A string containing the Vue component template, or null if the SVG content is invalid.
+ */
+const vueIconComponent = ({ file, data }) => {
+  const componentName = `${createComponentName(file)}`;
+
+  const sizePx = file.replace(".svg", "").split("_").pop();
+
+  const sizeRem = convertPxToRem(sizePx.replace("px", ""));
+  const parsedSVG = parse(data);
+
+    const parsedData = data.replace(
+      "<svg",
+      `<svg aria-hidden="true" width="${sizeRem}" height="${sizeRem}" :fill="color"`
+    );
+  const viewBox = parsedSVG.children.find((child) => child.tagName === "svg")
+    ?.properties?.viewBox;
+  
+  const content =
+    parsedSVG.children.find((child) => child.tagName === "svg")?.children || [];
+
+  if (!sizeRem || content.length === 0 || !viewBox) {
+    console.error(
+      `✗ ERROR : Problem building ${file} for VueJS - missing or invalid SVG content`
+    );
+
+    return null;
+  }
+  return `<template>${parsedData}</template>
+<script lang="ts">
+export default {
+    name: '${componentName}',
+    props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: 'currentColor',
+    },
+  },
+};
+</script>
+`;
+};
+
+/**
+ * Wraps the `vueIconComponent` function to directly return a Vue component template string
+ * for a given icon object.
+ *
+ * @param {Object} icon - An object containing the 'file' name and SVG 'data' of an icon.
+ * @returns {string|null} A string containing the Vue component template, or null if the SVG content is invalid.
+ */
+const templateVue = (icon) => `${vueIconComponent(icon, icon.data)}`;
+
+module.exports = templateVue;

package/icons-builder/index.js

@@ -0,0 +1,44 @@
+/**
+ * Compiles icons by cleaning directories, fetching icons,
+ * and generating Vue components for each icon. Logs progress and success messages
+ * to the console. This function encapsulates the entire process of preparing
+ * and compiling icons for use in VueJS applications.
+ *
+ * @async
+ * @function compileIcons
+ * @returns {Promise<void>} A promise that resolves when the icons have been compiled
+ * successfully or rejects with an error if any step in the process fails.
+ */
+const cleanDirectories = require("./utils/directory-cleaner");
+const fetchIcons = require("./utils/fetch-icons");
+const generateVueComponent = require("./component-generator");
+
+console.log(`
+•••••••••••••••••••••••••••••••••••••••
++                                     +
++      COMPILING ADS ICON FOR VUEJS   +
++                                     +
+•••••••••••••••••••••••••••••••••••••••
+`);
+
+async function compileIcons() {
+  try {
+    await cleanDirectories();
+    console.log("✓ SUCCESS : Icons Directories cleaned and recreated");
+
+    const icons = await fetchIcons();
+    console.log("✓ SUCCESS : Icons cleaned and saved as SVGs in the package");
+
+    await generateVueComponent(icons);
+    console.log(
+      "✓ SUCCESS : Monochrom icons compiled into react and vue components"
+    );
+
+    // Assuming there's a step to compile or gather color icons as well, not shown in the original code.
+    // const colorIcons = ...; // This line is just a placeholder for actual logic.
+  } catch (err) {
+    console.error(`✗ ERROR : ${err}`);
+  }
+}
+
+compileIcons();

package/icons-builder/utils/directory-cleaner.js

@@ -0,0 +1,46 @@
+const fs = require("fs").promises;
+const path = require("path");
+const { rimraf } = require("rimraf");
+
+/**
+ * Recreates a directory at the specified path. If the directory already exists,
+ * no action is taken. If the directory does not exist, it is created with all
+ * necessary parent directories.
+ *
+ * @async
+ * @param {string} componentPath - The path where the directory will be recreated.
+ * @returns {Promise<boolean>} A promise that resolves to true if the directory
+ * is successfully checked and possibly created.
+ * @throws {Error} Throws an error if there is an issue accessing or creating the directory.
+ */
+const recreateIconsDir = async (componentPath) => {
+  try {
+    await fs.access(componentPath);
+    // If the directory exists, no further action is needed
+  } catch (error) {
+    // If the directory does not exist, it will throw an error, then we create the directory
+    await fs.mkdir(componentPath, { recursive: true });
+  }
+  return true; // This return value is not strictly needed unless you use it for a condition
+};
+
+
+/**
+ * Cleans and recreates the icons directory within the "src/components" path
+ * relative to the current working directory. This function first attempts to
+ * remove the existing icons directory and then recreates it.
+ *
+ * @async
+ * @returns {Promise<void>} A promise that resolves when the icons directory has
+ * been successfully cleaned and recreated. 
+ * @throws {Error} Throws an error if cleaning or recreating the directory fails.
+ */
+const cleanRecreateIconsDirs = async () => {
+  const componentPath = path.join(process.cwd(), "src/components");
+  // Clean the directory first
+  await rimraf(componentPath);
+  // Then recreate the directory
+  await recreateIconsDir(componentPath);
+};
+
+module.exports = cleanRecreateIconsDirs;

package/icons-builder/utils/fetch-icons.js

@@ -0,0 +1,47 @@
+#! /usr/bin/env node
+const fs = require("fs").promises; // Use the promise-based version of fs
+const path = require("path");
+const { glob } = require("glob");
+
+/**
+ * Asynchronously reads the content of an icon file and returns an object containing
+ * the file name and its data.
+ * 
+ * @async
+ * @param {string} file - The path to the icon file to be read.
+ * @returns {Promise<{file: string, data: string}>} A promise that resolves to an object
+ * containing the 'file' name (path) and the 'data' as a UTF-8 string.
+ * @throws {Error} Throws an error if reading the file fails.
+ */
+const readIcon = async (file) => {
+  const data = await fs.readFile(file, "utf8");
+  return { file, data };
+};
+
+/**
+ * Asynchronously searches for SVG icon files within the 'node_modules/@mozaic-ds/icons/build/svg'
+ * directory and reads their contents. Returns an array of objects, each representing an icon
+ * with its file name and data.
+ *
+ * @async
+ * @returns {Promise<Array<{file: string, data: string}>>} A promise that resolves to an array of
+ * objects, where each object contains the 'file' name (only the basename) and the 'data' of an icon.
+ * @throws {Error} Throws an error if the search or file reading fails.
+ */
+const fetchIcons = async () => {
+  try {
+    const inputPath = path.relative(
+      process.cwd(),
+      "node_modules/@mozaic-ds/icons/build/svg/**/*.svg"
+    );
+    const icons = await glob(inputPath);
+    const iconsData = await Promise.all(icons.map(readIcon));
+    iconsData.forEach((icon) => (icon.file = path.basename(icon.file)));
+    return iconsData;
+  } catch (err) {
+    console.error(err);
+    throw err; // Rethrowing the error to be handled by the caller
+  }
+};
+
+module.exports = fetchIcons;

package/icons-builder/utils/tools.js

@@ -0,0 +1,20 @@
+/**
+ * Creates Component name from a string (usually the icon file name)
+ * @param {string} str - The icon fileName 
+ */
+const createComponentName = (str) => {
+  str = str?.replace('.svg', '')?.replace(/_/g, '')?.replace(str.split('_')[0], '')
+  return (str?.match(/[a-zA-Z0-9]+/g) || [])
+    .map((w) => `${w.charAt(0).toUpperCase()}${w.slice(1)}`)
+    .join('')
+}
+
+/**
+ * Create rem based ison size based on a 16 px standard
+ */
+const convertPxToRem = (str) => parseInt(str, 10) / 16 + 'rem'
+
+module.exports = {
+  createComponentName,
+  convertPxToRem,
+}

package/package.json

@@ -1,29 +1,33 @@
 {
   "name": "@mozaic-ds/icons-vue",
-  "version": "0.0.1-beta.0",
+  "version": "0.1.0-beta.0",
   "description": "ADS icons for vue usage",
-  "files": [
-    "dist/*",
-    "src/components/*",
-    "types/*",
-    "*.d.ts"
-  ],
-  "main": "./dist/ads-icons-vue.umd.cjs",
-  "module": "./dist/ads-icons-vue.mjs",
+  "main": "index.js",
   "scripts": {
-    "icons:build": "node iconCompiler/index.js",
-    "build": "vue-tsc && vite build"
+    "clean": "rm -rf dist/",
+    "icons:build": "node icons-builder/index.js",
+    "build": "vue-tsc && vite build",
+    "prepublishOnly": "npm run icons:build && npm run build && cp package.json dist",
+    "release": "release-it",
+    "release:beta": "release-it --preRelease=beta",
+    "npm:publish": "npm publish --access public",
+    "npm:publishBeta": "npm publish --tag beta --access public"
   },
   "dependencies": {
-    "svg-parser": "^2.0.4",
-    "svgo": "^2.8.0"
+    "@mozaic-ds/icons": "^2.0.0-beta.22"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.2.0",
     "typescript": "^4.8.4",
     "vite": "^3.2.3",
     "vue-loader": "^16.8.3",
-    "vue-tsc": "^1.0.9"
+    "vue-tsc": "^1.0.9",
+    "@release-it/conventional-changelog": "^8.0.1",
+    "glob": "^10.3.10",
+    "release-it": "^17.1.1",
+    "rimraf": "^5.0.5",
+    "svg-parser": "^2.0.4",
+    "svgo": "^3.2.0"
   },
   "repository": {
     "type": "git",
@@ -32,7 +36,8 @@
   "keywords": [
     "icons",
     "ads",
-    "design-system"
+    "design-system",
+    "icons-vue"
   ],
   "author": "@adeo/adeo-design-system",
   "license": "Apache-2.0",

package/product-info.json

@@ -0,0 +1 @@
+{"tangram_id": "8a7b40e6-1bb8-4654-8de8-8163e7dabc1f"}

package/src/components/A11y20/A11y20.vue

@@ -1,4 +1,4 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+<template><svg aria-hidden="true" width="1.25rem" height="1.25rem" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
   <path fill-rule="evenodd" d="M10 3.25a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM1.75 10a8.25 8.25 0 1 1 16.5 0 8.25 8.25 0 0 1-16.5 0Zm3.413-3.252a.75.75 0 0 1 1.006-.335c.71.355 2.266.754 3.831.754 1.566 0 3.12-.4 3.831-.754a.75.75 0 0 1 .671 1.341c-.743.372-1.992.717-3.335.852v1.636l.129.27c.126.265.299.637.485 1.062.367.84.805 1.93 1.03 2.827a.75.75 0 1 1-1.455.364c-.192-.768-.587-1.762-.95-2.59A36.358 36.358 0 0 0 10 11.28c-.114.241-.256.55-.407.896-.362.827-.757 1.82-.949 2.59A.75.75 0 1 1 7.19 14.4c.225-.898.663-1.987 1.03-2.827a38.132 38.132 0 0 1 .614-1.332V8.606c-1.343-.135-2.592-.48-3.335-.852a.75.75 0 0 1-.335-1.006Zm6.087-1.331a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z"/>
 </svg>
 </template>

package/src/components/A11y20/index.js

@@ -0,0 +1,2 @@
+import A11y20 from './A11y20.vue';
+export { A11y20 };

package/src/components/A11y24/A11y24.vue

@@ -1,4 +1,4 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<template><svg aria-hidden="true" width="1.5rem" height="1.5rem" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm4.106-3.947a1 1 0 0 1 1.341-.447c.837.418 2.687.894 4.553.894s3.716-.476 4.553-.894a1 1 0 1 1 .894 1.788c-.887.444-2.36.854-3.947 1.024v1.85a42.089 42.089 0 0 1 .729 1.581c.44 1.008.97 2.322 1.241 3.409a1 1 0 1 1-1.94.485c-.229-.914-.7-2.1-1.134-3.092a43.365 43.365 0 0 0-.396-.879 40.14 40.14 0 0 0-.396.879c-.434.992-.905 2.178-1.134 3.091a1 1 0 1 1-1.94-.485c.271-1.086.8-2.4 1.241-3.408a46.198 46.198 0 0 1 .729-1.581v-1.85c-1.588-.17-3.06-.58-3.947-1.024a1 1 0 0 1-.447-1.341ZM13.5 6.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
 </svg>
 </template>

package/src/components/A11y24/index.js

@@ -0,0 +1,2 @@
+import A11y24 from './A11y24.vue';
+export { A11y24 };

package/src/components/A11y32/A11y32.vue

@@ -1,4 +1,4 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<template><svg aria-hidden="true" width="2rem" height="2rem" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
   <path fill-rule="evenodd" d="M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5ZM3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16Zm5.439-5.114a1 1 0 0 1 1.342-.447c1.17.585 3.69 1.228 6.219 1.228 2.53 0 5.05-.643 6.22-1.228a1 1 0 1 1 .894 1.789c-1.197.598-3.25 1.16-5.447 1.36v2.846a55.31 55.31 0 0 1 1 2.165c.586 1.341 1.282 3.072 1.636 4.492a1 1 0 0 1-1.94.485c-.312-1.247-.95-2.85-1.53-4.175A58.826 58.826 0 0 0 16 17.58a58.826 58.826 0 0 0-.834 1.82c-.58 1.326-1.217 2.928-1.53 4.175a1 1 0 0 1-1.94-.485c.355-1.42 1.051-3.15 1.638-4.492a61.11 61.11 0 0 1 1-2.165v-2.845c-2.197-.201-4.251-.763-5.448-1.361a1 1 0 0 1-.447-1.342ZM18 8.666a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
 </svg>
 </template>

package/src/components/A11y32/index.js

@@ -0,0 +1,2 @@
+import A11y32 from './A11y32.vue';
+export { A11y32 };

package/src/components/A11y48/A11y48.vue

@@ -1,4 +1,4 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+<template><svg aria-hidden="true" width="3rem" height="3rem" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
   <path fill-rule="evenodd" d="M24 7.5C14.887 7.5 7.5 14.887 7.5 24S14.887 40.5 24 40.5 40.5 33.113 40.5 24 33.113 7.5 24 7.5ZM4.5 24C4.5 13.23 13.23 4.5 24 4.5S43.5 13.23 43.5 24 34.77 43.5 24 43.5 4.5 34.77 4.5 24Zm8.158-7.67a1.5 1.5 0 0 1 2.013-.672c1.755.878 5.534 1.842 9.329 1.842 3.795 0 7.574-.964 9.33-1.842a1.5 1.5 0 1 1 1.34 2.684c-1.794.897-4.875 1.74-8.17 2.04v4.269l.34.705c.301.636.714 1.525 1.16 2.543.88 2.011 1.923 4.608 2.455 6.737a1.5 1.5 0 1 1-2.91.728c-.468-1.87-1.424-4.274-2.294-6.263A88.515 88.515 0 0 0 24 26.372l-.13.272a88.515 88.515 0 0 0-1.12 2.457c-.87 1.989-1.827 4.392-2.295 6.263a1.5 1.5 0 1 1-2.91-.728c.532-2.13 1.576-4.726 2.456-6.737A91.108 91.108 0 0 1 21.5 24.65v-4.268c-3.295-.302-6.376-1.144-8.17-2.041a1.5 1.5 0 0 1-.672-2.013ZM27 13a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
 </svg>
 </template>

package/src/components/A11y48/index.js

@@ -0,0 +1,2 @@
+import A11y48 from './A11y48.vue';
+export { A11y48 };

package/src/components/A11y64/A11y64.vue

@@ -1,4 +1,4 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+<template><svg aria-hidden="true" width="4rem" height="4rem" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
   <path fill-rule="evenodd" d="M32 9.5C19.574 9.5 9.5 19.574 9.5 32S19.574 54.5 32 54.5 54.5 44.426 54.5 32 44.426 9.5 32 9.5ZM6.5 32C6.5 17.917 17.917 6.5 32 6.5S57.5 17.917 57.5 32 46.083 57.5 32 57.5 6.5 46.083 6.5 32Zm10.825-10.004a1.5 1.5 0 0 1 2.012-.671c2.422 1.21 7.54 2.508 12.663 2.508 5.122 0 10.241-1.297 12.663-2.508a1.5 1.5 0 0 1 1.341 2.683c-2.41 1.206-6.66 2.352-11.17 2.71v6.266l.021.045a121.085 121.085 0 0 1 2.019 4.37c1.172 2.678 2.549 6.108 3.248 8.904a1.5 1.5 0 1 1-2.91.728c-.635-2.538-1.925-5.775-3.086-8.43a118.492 118.492 0 0 0-2.092-4.512l-.032-.065-.002-.003-.002.003-.032.065a68.262 68.262 0 0 0-.59 1.221c-.391.823-.926 1.975-1.502 3.291-1.161 2.655-2.451 5.892-3.085 8.43a1.5 1.5 0 1 1-2.91-.728c.698-2.796 2.075-6.226 3.247-8.904a121.085 121.085 0 0 1 2.018-4.37l.023-.045v-6.266c-4.511-.358-8.76-1.504-11.171-2.71a1.5 1.5 0 0 1-.671-2.012ZM36 17.333a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/>
 </svg>
 </template>

package/src/components/A11y64/index.js

@@ -0,0 +1,2 @@
+import A11y64 from './A11y64.vue';
+export { A11y64 };

package/src/components/API20/API20.vue

@@ -1,4 +1,4 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<template><svg aria-hidden="true" width="1.25rem" height="1.25rem" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <g clip-path="url(#a)">
     <path fill-rule="evenodd" d="M6.033 6.18C6.195 6.09 6.486 6 7 6V4c-.736 0-1.383.128-1.923.423-.558.303-.93.744-1.167 1.24-.412.865-.41 1.94-.41 2.733V8.5c0 .949-.02 1.567-.215 1.976a.712.712 0 0 1-.318.345C2.805 10.909 2.514 11 2 11v2c.514 0 .805.09.967.179.146.08.242.185.318.345.195.41.215 1.027.215 1.976v.104c0 .793-.002 1.868.41 2.732.236.497.61.938 1.167 1.242.54.294 1.187.422 1.923.422v-2c-.514 0-.805-.09-.967-.179a.712.712 0 0 1-.318-.345C5.52 17.066 5.5 16.45 5.5 15.5v-.104c0-.793.002-1.868-.41-2.732A2.822 2.822 0 0 0 4.654 12a2.8 2.8 0 0 0 .436-.664c.412-.864.41-1.939.41-2.732V8.5c0-.949.02-1.567.215-1.976a.712.712 0 0 1 .318-.345Zm11.934 0C17.805 6.09 17.514 6 17 6V4c.736 0 1.383.128 1.924.423.557.303.93.744 1.166 1.24.412.865.41 1.94.41 2.733V8.5c0 .949.02 1.567.215 1.976.076.16.172.265.318.345.162.088.453.179.967.179v2c-.514 0-.805.09-.967.179a.711.711 0 0 0-.318.345c-.195.41-.215 1.027-.215 1.976v.104c0 .793.002 1.868-.41 2.732a2.71 2.71 0 0 1-1.166 1.242c-.541.294-1.188.422-1.924.422v-2c.514 0 .805-.09.967-.179a.711.711 0 0 0 .318-.345c.195-.41.215-1.027.215-1.976v-.104c0-.793-.002-1.868.41-2.732a2.8 2.8 0 0 1 .436-.664 2.822 2.822 0 0 1-.436-.664c-.412-.864-.41-1.939-.41-2.732V8.5c0-.949-.02-1.567-.215-1.976a.711.711 0 0 0-.318-.345ZM7.833 9h1.485l1.575 5.213H9.64l-.27-.968H7.713l-.263.968h-1.2L7.832 9Zm1.26 3.255-.57-2.018-.548 2.018h1.117ZM11.579 9h1.748c.37 0 .697.068.982.203.29.135.515.332.675.592.165.26.248.568.248.922 0 .365-.083.68-.248.945a1.61 1.61 0 0 1-.682.608 2.32 2.32 0 0 1-.99.203h-.57v1.74h-1.163V9Zm1.658 2.482c.25 0 .445-.064.585-.194.145-.13.217-.318.217-.563 0-.24-.07-.42-.21-.54-.135-.125-.322-.188-.562-.188h-.525v1.486h.495ZM17.202 9H16.04v5.213h1.162V9Z"/>
   </g>

package/src/components/API20/index.js

@@ -0,0 +1,2 @@
+import API20 from './API20.vue';
+export { API20 };

package/src/components/API24/API24.vue

@@ -1,4 +1,4 @@
-<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+<template><svg aria-hidden="true" width="1.5rem" height="1.5rem" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
   <g clip-path="url(#a)">
     <path fill-rule="evenodd" d="M4.987 5.076c.151-.082.408-.159.846-.159v-1.5c-.604 0-1.128.105-1.563.342a2.174 2.174 0 0 0-.937.997C2.998 5.459 3 6.336 3 7.002v.082c0 .784-.015 1.32-.188 1.682a.676.676 0 0 1-.3.325c-.15.082-.408.16-.845.16v1.5c.437 0 .694.077.845.159.14.075.23.177.3.324.173.362.188.899.188 1.683v.082c0 .665-.002 1.543.333 2.246.19.4.49.753.937.997.435.237.96.342 1.563.342v-1.5c-.438 0-.695-.077-.846-.16a.677.677 0 0 1-.3-.324c-.172-.362-.187-.899-.187-1.683v-.082c0-.665.001-1.543-.333-2.246A2.25 2.25 0 0 0 3.765 10c.168-.177.3-.376.402-.589.334-.703.333-1.58.333-2.246v-.081c0-.785.015-1.321.187-1.683a.676.676 0 0 1 .3-.325Zm10.025 0c-.15-.082-.408-.159-.846-.159v-1.5c.604 0 1.128.105 1.564.342.447.243.746.597.937.997.334.703.333 1.58.333 2.246v.082c0 .784.015 1.32.187 1.682.07.147.162.25.3.325.151.082.408.16.846.16v1.5c-.438 0-.695.077-.846.159a.676.676 0 0 0-.3.324c-.172.362-.187.899-.187 1.683v.082c0 .665.001 1.543-.333 2.246-.19.4-.49.753-.937.997-.436.237-.96.342-1.564.342v-1.5c.438 0 .695-.077.846-.16a.677.677 0 0 0 .3-.324c.173-.362.188-.899.188-1.683v-.082c0-.665-.002-1.543.333-2.246.101-.212.233-.412.402-.589a2.247 2.247 0 0 1-.402-.589c-.335-.703-.334-1.58-.333-2.246v-.081c0-.785-.015-1.321-.188-1.683a.676.676 0 0 0-.3-.325ZM6.527 7.5h1.237l1.313 4.344H8.033l-.225-.806H6.427l-.219.806h-1L6.527 7.5Zm1.05 2.713-.475-1.681-.456 1.68h.93ZM9.649 7.5h1.456c.309 0 .582.057.82.17.24.112.428.276.562.493.137.216.206.473.206.769 0 .304-.069.566-.206.787a1.34 1.34 0 0 1-.57.506 1.933 1.933 0 0 1-.824.17h-.475v1.45h-.969V7.5Zm1.381 2.07c.209 0 .371-.055.488-.163.12-.109.181-.265.181-.47 0-.2-.058-.35-.175-.45-.112-.103-.269-.155-.469-.155h-.437v1.237h.412Zm3.305-2.07h-.969v4.344h.969V7.5Z"/>
   </g>

package/src/components/API24/index.js

@@ -0,0 +1,2 @@
+import API24 from './API24.vue';
+export { API24 };