@infineon/infineon-icons NPM

About The Project

Simple library containing Infineon's Icons as SVGs: Infineons Icon Library.

Getting Access to Infineons Github Repository

Creating GitHub Account

In order to access the npm packages that are available at github you need to create an github account and contact out github admins (Yushev Artem) to be added to the Infineon Company.

Create + Configure PAT

Create PAT follow guide at https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token give token the "read:packages" scope
Authorize PAT with Infineon SSO Click on Configure SSO Click on Authorize

Set global npm config for your pc

npm config set '//npm.pkg.github.com/:_authToken' '<yourPAThere>'

Project configuration

add a file .npmrc to your project root. It should contain @infineon:registry=https://npm.pkg.github.com/ It is considered best practice to keep package configuration on project level. Please note that access configuration should never be added to your source control system, though.

Installation

Install Packages

npm i -S @infineon/infineon-icons

Create Icon Library

create file ./src/plugins/infineonIcons.js

import library from '@infineon/infineon-icons/library';

import {
	cCheck16,
} from '@infineon/infineon-icons';

library.add(
	cCheck16,
);

import this file in your main.js/index.js

import './plugins/infineonIcons'

Usage

Use the icon component in any template. The icon has to be a string matching the icon name in your library. The name can be the original file name from figma or camelCase.

Depending on project language, the following shows how to access the icon and its properties:

import library from '@infineon/infineon-icons/library';

const iconObj = library.getIcon('cCheck16');
const height = iconObj.height;
const width = iconObj.width;
const viewbox = `0 0 ${height} ${width}`;
const pathD = iconObj.svgContent.substring(iconObj.svgContent.indexOf('d=') + 3).split("\"/>")[0];

Include the icon as an SVG into your project:

<svg width={width} height={height} xmlns="http://www.w3.org/2000/svg" viewBox={viewbox}><path fill="currentColor" d={pathD}/></svg>

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".