npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@infineon/infineon-icons

v3.3.0

Published

Infineon Icons

Downloads

3,828

Readme

About The Project

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

  1. 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

  2. Authorize PAT with Infineon SSO Click on Configure SSO Click on Authorize

  3. Set global npm config for your pc

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

Project configuration

  1. 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>

Usage of Fonts in plain HTML

Overview The infineon-icons package provides a collection of SVG icons and an accompanying icon font. Integrating this font into your HTML project allows you to display icons by simply applying CSS classes to HTML elements, enhancing the visual appeal and user experience of your web pages.


Prerequisites

  • Basic understanding of HTML and CSS.

  • A plain HTML project or webpage where you want to use the icons.


Step 1: Obtain the infineon-icons Package** If you have Node.js and NPM installed, you can install the package using the following command:

npm install @infineon/infineon-icons --save

This will download the package into your project's node_modules directory.


Step 2: Include Font Files and CSS in Your Project Locate the Necessary Files After obtaining the package, locate the following files:

  • Font Files (formats like .ttf, .woff, .woff2):
infineon-icons.ttf
infineon-icons.woff
infineon-icons.woff2
  • CSS File :
infineon-icons.css

Copy Files to Your Project Organize the files within your project directory:

  1. Create Directories :
  • Fonts Directory : assets/fonts/

  • CSS Directory : assets/css/

  1. Copy Font Files :Copy the font files from ./node_modules/@infineon/infineon-icons/dist/fonts into the assets/fonts/ directory.

  2. Copy CSS File :Copy the infineon-icons.css file from ./node_modules/@infineon/infineon-icons/dist/fonts into the assets/css/ directory. Adjust Font Paths in CSS Open infineon-icons.css and update the @font-face src paths to point to the correct location of the font files relative to the CSS file.

@font-face {
  font-family: "infineon-icons";
  src: url("../fonts/infineon-icons.woff2") format("woff2"),
       url("../fonts/infineon-icons.woff") format("woff"),
       url("../fonts/infineon-icons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

Step 3: Reference the CSS File in Your HTML Include the CSS file in the <head> section of your HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Infineon Icons Example</title>
  <!-- Include the Infineon Icons CSS -->
  <link rel="stylesheet" href="assets/css/infineon-icons.css">
</head>
<body>
  <!-- Your content will go here -->
</body>
</html>

Step 4: Use the Icons in Your HTML Understanding the CSS Classes The infineon-icons.css file defines CSS classes for each icon. There is a base class (e.g., icon) and modifier classes for each icon (e.g., icon-home, icon-user).Example Usage

<!-- Antenna Icon -->
<span class="icon icon-antenna" aria-hidden="true"></span>

<!-- Arrow Right Icon -->
<span class="icon icon-arrow-right" aria-hidden="true"></span>

<!-- Beginner Icon -->
<span class="icon icon-beginner" aria-hidden="true"></span>

Find Available Icon Classes Open infineon-icons.css to see the list of available icon classes. Look for classes defined like:

.icon-antenna::before {
  content: "\e905";
}

.icon-arrow-right::before {
  content: "\e90b";
}

/* ...and so on */

Accessibility Considerations Ensuring your website is accessible to all users, including those with disabilities, is crucial. Below are guidelines to make your use of infineon-icons icon font more accessible.Use aria-hidden="true" for Decorative Icons**

  • Purpose : Decorative icons do not convey essential information and should be hidden from assistive technologies to avoid confusion.

  • Action : Add aria-hidden="true" to icons that are purely decorative.

<!-- Decorative icon -->
<span class="icon icon-decorative" aria-hidden="true"></span>

Use Tooltips

  • Purpose : Tooltips provide additional context or information about an icon when a user hovers over it.

  • Action : Use the title attribute to add tooltips to icons, and provide accessible text using aria-label if the icon is interactive.

<!-- Icon with tooltip -->
<button aria-label="Help">
  <span class="icon icon-help" aria-hidden="true" title="Get Help"></span>
</button>

Note : The title attribute may not be consistently read by screen readers, so always pair it with aria-label for accessibility. Use role="img" When Appropriate**

  • Purpose : When an icon conveys important information or serves as the sole content within an element, use role="img" to indicate it's an image.

  • Action : Apply role="img" and provide an aria-label to describe the icon's purpose.

<!-- Icon conveying important information -->
<span class="icon icon-warning" role="img" aria-label="Warning: Action Required"></span>

Implementing a Visually Hidden Class

  • Purpose : Visually hidden text provides information to screen readers without displaying it on the screen.

  • Action : Use a CSS class to hide text visually but keep it accessible to assistive technologies.

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Usage Example:

<button>
  <span class="icon icon-delete" aria-hidden="true"></span>
  <span class="visually-hidden">Delete item</span>
</button>

In this example, the visible icon is hidden from screen readers, while the text "Delete item" is hidden visually but read by screen readers.


Advanced Usage Using Icons in Buttons or Links

<!-- Icon with text label -->
<button>
  <span class="icon icon-download" aria-hidden="true"></span> Download
</button>

<!-- Icon-only button with accessible label -->
<button aria-label="Refresh">
  <span class="icon icon-refresh" aria-hidden="true"></span>
</button>

Styling Icons with Pseudo-elements You can apply icons using CSS pseudo-elements to keep your HTML cleaner.

/* CSS */
.button-print::before {
  content: "";
  display: inline-block;
  font-family: "infineon-icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
  margin-right: 8px;
  /* Use the appropriate Unicode from the CSS */
  content: "\e903"; /* Replace with the desired icon code */
}
<!-- HTML -->
<button class="button-print">Print Page</button>

Ensuring Keyboard Accessibility Make sure all interactive elements are focusable and operable via keyboard.

<!-- Focusable button with icon -->
<button aria-label="Close">
  <span class="icon icon-close" aria-hidden="true"></span>
</button>

Example Project Structure

project/
├── assets/
│   ├── css/
│   │   ├── infineon-icons.css
│   │   └── styles.css
│   └── fonts/
│       ├── infineon-icons.ttf
│       ├── infineon-icons.woff
│       └── infineon-icons.woff2
├── index.html
└── other-files...

Troubleshooting Icons Not Displaying

  • Check Font Paths : Ensure the paths in the @font-face declaration within infineon-icons.css correctly point to the font files.

  • File Names : Verify that the font file names match those referenced in the CSS file.

  • Browser Cache : Clear your browser cache to make sure it's loading the latest files.

  • Incorrect Icon Appearing : Make sure the Unicode values in the CSS correspond to the correct icons.

  • Class Names : Verify that you're using the correct class names as defined in infineon-icons.css.

  • CSS Specificity : If your icons aren't styling as expected, check if other CSS rules are overriding your styles.

  • Font Size and Line Height : Adjust font-size and line-height to achieve the desired appearance.


Additional Resources


Feel free to reach out if you have any more questions or need further assistance!

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".

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Requesting new Icons

If you need new icons that are currently not in our icon library please create an issue in our infineon-icons project here.

If you already have an SVG-Icon you can always just place it in the svg folder at our infineon-icons project and create a pull request.

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Benedikt Kämmerer - [email protected] Tihomir Yanchev - [email protected] Verena Lechner - [email protected]

Project Link: https://github.com/infineon/infineon-icons