Trengo Icons

This is a vue component library based on Anron Icons tree-shakable and typescript ready.

you can install it with npm or yarn

Installation

Use npm or yarn to install it:

yarn add @trengo/trengo-icons
npm install @trengo/trengo-icons

Usage

Minimal usage

The minimal usage is

<template>
  <trash-linear/>
</template>

<script>
import {TrashLinear} from '@trengo/trengo-icons'

export default {
  name: 'App',
  components: {
    TrashLinear
  }
}
</script>

Custom usage

Usage with props

<template>
  <div>
    <trash-linear size="2rem" fill="#ff0"/>
    <activity-linear fill="#00f" width="40px" height="40px"/>
  </div>
</template>

<script>
import {TrashLinear, ActivityLinear} from '@trengo/trengo-icons'

export default {
  name: 'App',
  components: {
    TrashLinear,
    ActivityLinear
  }
}
</script>

Using with CSS

And you can even use css to change color and size

<template>
  <trash-linear class="trash"/>
</template>

<script>
import {TrashLinear} from '@trengo/trengo-icons'

export default {
  name: 'App',
  components: {
    TrashLinear
  }
}
</script>

<style>
.trash {
  font-size: 3em;
  color: #f00;
}
</style>

Development

Clone the repository and go to the folder

git clone https://github.com/weerdm/trengo-icons.git
cd trengo-icons

Use npm to install dependencies

npm install

you can run development server and test the icons in browser with editing 'dev/serve.vue' and seeing the result

npm run serve

Adding new icon

If you want to add new icon you can do it with these steps.

Right click on main icon layer in Figma and select "Copy/Paste as" > "Copy as SVG"

Based on the style of the component Linear/Duo-tone/Filled/Duo-color make a new file based on the name of the component in the relative folder

<template>
  <svg
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    :width="_width"
    :height="_height"
  >
    <g fill="none">
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M4.171 5.421c-.37.292-.421.493-.421.579 0 .07.03.205.23.41.204.207.54.435 1.024.66.967.447 2.382.814 4.084 1.014a.75.75 0 0 1 .662.745v5.513c.722-.06 1.475-.092 2.25-.092.775 0 1.528.032 2.25.092V8.829c0-.38.285-.7.662-.745 1.702-.2 3.117-.567 4.083-1.014.485-.225.82-.453 1.024-.66.201-.205.231-.34.231-.41 0-.086-.052-.287-.422-.579-.361-.285-.93-.574-1.701-.83-1.534-.512-3.7-.841-6.127-.841-2.427 0-4.593.329-6.127.84-.77.257-1.34.546-1.702.831zM20.25 8.103a6.751 6.751 0 0 1-.624.328c-1.015.47-2.355.83-3.876 1.055V19.97c1.33-.211 2.442-.527 3.245-.9.485-.224.82-.452 1.024-.66.201-.204.231-.34.231-.409V8.103zM21.75 6v12c0 .584-.283 1.077-.661 1.461-.375.382-.885.702-1.463.97-1.16.537-2.744.932-4.538 1.143a.75.75 0 0 1-.838-.745v-4.982A25.554 25.554 0 0 0 12 15.75c-.78 0-1.534.034-2.25.097v4.982a.75.75 0 0 1-.838.745c-1.794-.211-3.379-.606-4.538-1.144-.578-.267-1.088-.587-1.463-.969-.378-.384-.661-.877-.661-1.461V6c0-.743.452-1.33.993-1.757.55-.433 1.298-.79 2.156-1.076C7.123 2.593 9.457 2.25 12 2.25s4.877.343 6.601.917c.858.286 1.607.643 2.156 1.076.54.426.993 1.014.993 1.757zm-18 2.103V18c0 .07.03.205.23.41.204.207.54.435 1.024.66.804.372 1.917.688 3.246.899V9.486c-1.521-.224-2.861-.585-3.876-1.055a6.747 6.747 0 0 1-.624-.328z"
        :fill="fill"
      ></path>
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M3 5.25a.75.75 0 0 1 .75.75c0 .07.03.205.23.41.204.207.54.435 1.024.66.967.447 2.382.814 4.084 1.014a.75.75 0 0 1 .662.745v12a.75.75 0 0 1-.838.745c-1.794-.211-3.379-.606-4.538-1.144-.578-.267-1.088-.587-1.463-.969-.378-.384-.661-.877-.661-1.461V6A.75.75 0 0 1 3 5.25zm.75 2.853V18c0 .07.03.205.23.41.204.207.54.435 1.024.66.804.372 1.917.688 3.246.899V9.486c-1.521-.224-2.861-.585-3.876-1.055a6.747 6.747 0 0 1-.624-.328z"
        :fill="_secondaryFill"
      ></path>
    </g>
  </svg>
</template>

<script>
import icon from "../icon-mixin";

export default {
  mixins: [icon],
};
</script>

Paste the svg in the template. and then Edit it based on these points:

• viewBox should be viewBox="0 0 24 24".
• Replace width and height with :width="_width" :height="_height".
• Copy the script part from the code above to add the icon mixin.
• You should replace the color of fill="black" with :fill="fill".
• If it's a dual-color icon, you should replace the second color with :fill="_secondaryFill".
• Always test the icon using all the features in dev/serve.vue and run the project with npm run serve.

Then find the index.ts in the same folder and export the component in the same way as other icons:

export { default as BookmarkSlashLinear } from "./BookmarkSlash.vue";

Before publish

First, we have to create a PR to review our code together. In the further steps, we need to add versioning to our package. By reviewing the code, we can be sure that we are not adding unnecessary versioning.

⚠️ Don't merge the branch after the PR is approved; first, we need to publish the new version!

This will add a commit to your branch, make sure to push it

Publishing new version to npm after approving the PR

If you made any changes (adding/deleting icons, changing syntax, etc.) to the library, you should publish it to npm to be able to use the upgraded package.

npm login

Then you should bump up the version by running this in the root folder.

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]

if you did not change the syntax and just added icons you should just do the minor. but if it's not backward compatible you should do major and if it's just a fix do it with the patch.

npm version minor

Alternatively, you can use the deploy:patch npm script which automates the patch version update and publishing process:

npm run deploy:patch

This command will:

1. Log in to npm
2. Increment the patch version number
3. Rebuild the distribution files
4. Publish the package to npm

Remember that your account should have the write access to the Trengo icons npm package in npm.

Publish

To publish your changes on NPM, firs you need to build and re-generate the dist folder.

npm run prebuild && npm run build

The prebuild will remove the existed dist folder. Now you are ready to publish your changes on NPM.

npm publish

⚠️ Now that you've published the package, a new commit has been added to your branch, don't forget to push it to the branch

It is time to update the package in your project by running the code below in the root directory of the Trengo project.

npm install @trengo/trengo-icons@latest

Push changes

After upgrading the package on NPM, it is time to merge your PR.

Releasing a new version in GitHub ( Not mandatory )

After you pushed changes on git master. It's better to add a new version on the Releases page, with the version name and also description of what is changed to have a track of changes.

License

Copyright© Anron Icons. Trengo™