Open In App

Primer CSS Octicons Linting

Improve
Improve
Like Article
Like
Save
Share
Report

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Linting is the process of automatically checking code for potential errors or issues. In the context of Primer CSS Octicons, linting might involve using a tool to check the code for issues such as syntax errors, formatting issues, or violations of style guidelines. Octicons is a collection of scalable vector icons that are designed to be used in GitHub’s design system & Primer. These icons are inspired by GitHub’s Octicons and are implemented using CSS, rather than as image files.

Although, the Octicons component is now deprecated, and no longer supported by any of the browsers. To use Octicons in the project, we can either include the Octicons CSS file in our HTML file or install the package using a package manager. The following command will be utilized to install octicons:

$ npm install octicons --save

 

Example: This example describes the Primer CSS Octicons Linting.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <link rel="stylesheet" href=
</head>
  
<body class="m-2">
    <div class="text-center">
        <h1 class="color-fg-success">
            GeeksforGeeks 
        </h1>
        <h3>
            Primer CSS Octicons Linting
        </h3>
  
        <div>
            <h3>
                <span class="octicon octicon-alert" 
                      aria-hidden="true">
                </span>
                No information Available
            </h3>
        </div>
          
        <p>
            <strong>Note:</strong
            The Octicons component is deprecated, & are
            no longer supported to any of the browsers.
        </p>
    </div>
</body>
  
</html>


Output:

 

Reference: https://primer.style/css/tools/linting#octicons



Last Updated : 22 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads