@liip/npm-icons - npm Package Compare versions

Comparing version 0.1.11 to 0.2.0

bin/add.js

 // ***********
 // * IMPORTS *
 // ***********
-import 'dotenv/config';
-
-import * as path from 'path';
 import chalk from 'chalk';
@@ -12,12 +9,15 @@ import prompts from 'prompts';
 import slugify from 'slugify';
+import {
+  getIconsPath,
+  getIconsTypes,
+  getIconsJsonUrl, getIconsSvgBaseUrl,
+} from './getConfiguration.js';
 
-const iconsPath = path.resolve(process.env.ICONS_PATH || './assets/icons');
-
 // *************
 // * CONSTANTS *
 // *************
-const iconsSvgBaseUrl = process.env.ICONS_SVG_BASE_URL || 'https://icons.liip.ch/icons';
-const iconsJsonUrl = process.env.ICONS_JSON_URL || 'https://icons.liip.ch/icons.json';
-const iconTypes = process.env.ICONS_TYPES
-  ? process.env.ICONS_TYPES.split(' ') : ['regular', 'light'];
+const iconsPath = getIconsPath();
+const iconsSvgBaseUrl = getIconsSvgBaseUrl();
+const iconsJsonUrl = getIconsJsonUrl();
+const iconTypes = getIconsTypes();
 
@@ -35,3 +35,5 @@ const getIconSvgUrl = (icon) => `${icon.path}/${icon.file}`;
   if (options.type && !iconTypes.includes(options.type)) {
-    console.error(chalk.bgRed.whiteBright(`Type: ${options.type} does not exist`));
+    console.error(
+      chalk.bgRed.whiteBright(`Type: ${options.type} does not exist`),
+    );
     if (process.env.VERBOSE > 0) {
@@ -93,7 +95,10 @@ console.log(chalk.yellow(`Available types: ${iconTypes.join(', ')}`));
   if (options.type) {
-    const icon = Object.values(availableIconsByType).find((availableIcon) => availableIcon.type === options.type);
+    const icon = Object.values(availableIconsByType)
+      .find((availableIcon) => availableIcon.type === options.type);
     if (icon) {
       return icon.icon;
     }
-    console.error(chalk.bgRed.whiteBright(`Icon not available on: ${options.type}`));
+    console.error(
+      chalk.bgRed.whiteBright(`Icon not available on: ${options.type}`),
+    );
     process.exit(1);
@@ -112,3 +117,6 @@ }
   const { type } = await prompts({
-    type: 'select', name: 'type', message: 'Select an icon type', choices: availableIcons,
+    type: 'select',
+    name: 'type',
+    message: 'Select an icon type',
+    choices: availableIcons,
   });
@@ -144,8 +152,13 @@
 
-const saveIconIntoIconsDirectory = (iconName, icon) => fs.writeFile(`${iconsPath}/${iconName}`, icon, (err) => {
-  if (err) {
-    console.error(err);
-  }
-  console.log(chalk.green(`✅ Icon ${iconName} added`));
-});
+const saveIconIntoIconsDirectory = (iconName, icon) => fs
+  .writeFile(
+    `${iconsPath}/${iconName}`,
+    icon,
+    (err) => {
+      if (err) {
+        console.error(err);
+      }
+      console.log(chalk.green(`✅ Icon ${iconName} added`));
+    },
+  );
 
@@ -202,3 +215,3 @@ const renameIcon = async (oldName) => {
 
-const addIcon = async (name, options) => {
+export default async (name, options) => {
   validateTypeOption(options);
@@ -214,5 +227,1 @@ const icon = await getIcon(name, options);
 };
-
-export {
-  addIcon,
-};

bin/index.js

 #! /usr/bin/env node
 import { Command } from 'commander';
-import { addIcon } from './add.js';
+import addIcon from './add.js';
 
@@ -12,3 +12,8 @@ const program = new Command();
   .description('Liip icons allow you to import icons from icons.liip.ch')
-  .option('-v, --verbose', 'verbosity that can be increased', increaseVerbosity, 0)
+  .option(
+    '-v, --verbose',
+    'verbosity that can be increased',
+    increaseVerbosity,
+    0,
+  )
   .version('1.0.0');
@@ -15,0 +20,0 @@

package.json

 {
   "name": "@liip/npm-icons",
-  "version": "0.1.11",
+  "version": "0.2.0",
   "description": "Import svg icons using cli",
@@ -25,10 +25,12 @@ "keywords": [
     "src/**/*",
-    ".env.example"
+    "dist/*"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "release": "release-it -V"
+    "release": "release-it -V",
+    "build": "rollup -c"
   },
   "type": "module",
-  "main": "index.js",
+  "main": "dist/library.js",
+  "module": "dist/library.mjs",
   "devDependencies": {
@@ -39,3 +41,6 @@ "eslint": "^8.15.0",
     "eslint-plugin-import": "^2.26.0",
-    "release-it": "^15.0.0"
+    "release-it": "^15.0.0",
+    "rollup": "^2.74.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-vue": "^6.0.0"
   },
@@ -46,3 +51,3 @@ "dependencies": {
     "commander": "^9.2.0",
-    "dotenv": "^16.0.1",
+    "cosmiconfig": "^7.0.1",
     "prompts": "^2.4.2",
@@ -49,0 +54,0 @@ "slugify": "^1.6.5"

README.md

@@ -9,10 +9,20 @@ ## [Official Documentation](https://liip.github.io/npm-icons/website)
 
-## Env variables
+Then create a config file `.npm-iconsrc.json`
+and where you want to download your icons
+```json[.npm-iconsrc.json]
+{
+  "iconsPath": "./src/assets/icons",
+}
+```
+
+
+## Extended configuration
 You would need to add the following variable to your `.env`
-```dotenv[.env]
-ICONS_BASE_URL="https://icons.liip.ch"
-ICONS_SVG_BASE_URL="https://icons.liip.ch/icons"
-ICONS_JSON_URL="https://icons.liip.ch/icons.json"
-ICONS_TYPES="regular light"
-ICONS_PATH="./assets/icons"
+```json[.npm-iconsrc.json]
+{
+  "iconsPath": "./src/assets/icons",
+  "iconsSvgBaseUrl": "https://icons.liip.ch/icons",
+  "iconsJsonUrl": "https://icons.liip.ch/icons.json",
+  "iconsTypes": ["regular", "light"]
+}
 ```
@@ -25,4 +35,43 @@
 
+## Vue 3 integration
+
+Requirements: 
+ - Vue 3
+ - Vite
+
+ 1. First we need to install vite-svg-loader to be able to use svg files as vue components:
+```bash
+npm install vite-svg-loader --save-dev
+```
+ 2. Add svgLoader to `vite.config.js`
+```javascript[vite.config.js]
+import svgLoader from 'vite-svg-loader'
+
+export default defineConfig({
+  plugins: [vue(), svgLoader()]
+})
+```
+ 4. Add the vue icon component `BaseIcon`
+```javascript
+import { createApp } from 'vue'
+import App from './App.vue'
+import BaseIcon from '@liip/npm-icons'
+
+createApp(App)
+  .use(BaseIcon)
+  .mount('#app')
+```
+ 5. Add a new env variable inside `.env`
+```dotenv[.env]
+VITE_ICONS_PATH="/src/assets/icons"
+```
+
+ 6. Finally, use the baseIcon component passing the icon name
+```vue
+<template>
+  <BaseIcon name="house" />
+</template>
+```
+
 ## Contribute
-
 To contribute first clone the project:
@@ -29,0 +78,0 @@ ```bash

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 4 instances in 1 package

Improved metrics

Total package byte prevSize

13977

increased by55.78%

Number of package files

10

increased by100%

Lines of code

344

increased by72%

Number of lines in readme file

104

increased by89.09%

Number of low supply chain risk alerts

5

decreased by-44.44%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

8

increased by60%

Dependency changes

• + Addedcosmiconfig@^7.0.1

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedcosmiconfig@7.1.0(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removeddotenv@^16.0.1

• - Removeddotenv@16.4.5(transitive)