@liip/npm-icons

Official Documentation

To get started quickly you can add liip-npm-icons dependency to your project:

npm install @liip/npm-icons

Then create a config file .npm-iconsrc.json and where you want to download your icons

{
  "iconsPath": "./src/assets/icons",
}

Extended configuration

You would need to add the following variable to your .npm-iconsrc.json

{
  "iconsPath": "./src/assets/icons",
  "iconsSvgBaseUrl": "https://icons.liip.ch/icons",
  "iconsJsonUrl": "https://icons.liip.ch/icons.json",
  "iconsTypes": ["regular", "light"],
  "authorization": {
    "username": null,
    "password": null
  }
}

In case you want to add the username and password as environment variable you can use:

ICONS_AUTH_USERNAME="yourUsername"
ICONS_AUTH_PASSWORD="yourPassword"

Basic command use

npx icons add <icon-name>

import icons from icons list file

File required one icon name per line
File example (icons-list.txt):

house
shop
music-ticket

command example:

npx icons add -l icons-list.txt

Vue 3 integration

Requirements:

• Vue 3
• Vite

• First we need to install vite-svg-loader to be able to use svg files as vue components:

npm install vite-svg-loader --save-dev

• Add svgLoader to vite.config.js

import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader()]
})

• Add the vue icon component BaseIcon

import { createApp } from 'vue'
import App from './App.vue'
import BaseIcon from '@liip/npm-icons'

createApp(App)
  .use(BaseIcon)
  .mount('#app')

• Use the baseIcon component passing the icon name

<template>
  <BaseIcon name="house" />
</template>

• (Optional) In case your icons are not located on- /src/assets/icons

<template>
  <BaseIcon name="house" iconsPath="/different/icons/path" />
</template>

Contribute

To contribute first clone the project:

git clone [e-mail]:liip/npm-icons.git

Release

The tool release-it is used to make a release so it is as simple as running the following command:

npm run release 

Update documentation

Our documentation is made with nuxt-content and the docs theme If you want to make any changes you need execute the following commands:

cd docs
npm install
npm run dev

Deployment

The deployment is made with github pages using static files thanks to nuxt generate. If you want to deploy some changes just run npm run release and then answer yes to the question Do you want to build the docs? then release-it will run nuxt generate and commit the changes into the tag commit.