https://github.com/psilore/stoker

A svg iconset
https://github.com/psilore/stoker

Last synced: 6 months ago
JSON representation

A svg iconset

• Host: GitHub
• URL: https://github.com/psilore/stoker
• Owner: psilore
• License: mit
• Created: 2020-07-14T11:32:23.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-07-14T15:44:17.000Z (about 6 years ago)
• Last Synced: 2025-07-27T11:46:43.535Z (12 months ago)
• Language: HTML
• Size: 32.2 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![alt text](https://afterburner.io/stoker-git.svg "Stoker - A svg iconset")

# Stoker

A svg iconset

DEMO: [https://afterburner.io/projects/stoker](https://afterburner.io/projects/stoker)

Disco inferno is broken! =) Lol, dance like no one is watching.

## Getting started

Class based structure in order to change/add styles to icon.

```

+-- svg

|   +-- .stroke (group)

|       +-- outline (stroke)

|   +-- .bg (group)

|       +-- .near (fill)

|       +-- .middle (fill)

|       +-- .far (fill)

```

#### Example

Showing capabilities with root and hsl value in css

DEMO: [https://psilore.github.io/stoker/src/example/](https://psilore.github.io/stoker/src/example/)

![Styling example](https://raw.githubusercontent.com/psilore/stoker/master/src/example/example-class-styling.svg)

SVG

```

  

    

      

        

        

        

      

      

        

        

        

      

    

  

```

CSS

```

:root {

    --primary-color: rgb(129, 0, 118);

    --dark-color: rgba(255, 0, 200, .9);

    --normal-color: rgba(255, 0, 200, .5);

    --light-color: rgba(255, 0, 200, .15);

}

svg g[class*="stroke"],

svg rect[class*="stroke"],

svg path[class*="stroke"] {

    stroke: var(--primary-color);

    stroke-linejoin: miter;

    stroke-width: 2;

}

svg g[class*="far"],

svg rect[class*="far"],

svg path[class*="far"],

svg polyline[class*="far"],

svg circle[class*="far"] {

    fill: var(--light-color);

}

svg g[class*="middle"],

svg rect[class*="middle"],

svg path[class*="middle"],

svg polyline[class*="middle"],

svg circle[class*="middle"] {

    fill: var(--normal-color);

}

svg g[class*="near"],

svg rect[class*="near"],

svg path[class*="near"],

svg polyline[class*="near"],

svg circle[class*="near"],

svg polygon[class*="near"] {

    fill: var(--dark-color);

}

```

## Icons

#### Heart

![Heart icon](https://raw.githubusercontent.com/psilore/stoker/master/src/svg/heart.svg)

```xml

  

    

      

        

        

      

    

  

```

#### Star

![Star icon](https://raw.githubusercontent.com/psilore/stoker/master/src/svg/star.svg)

```xml

  

    

      

        

        

      

    

  

```

#### Image

![Image icon](https://raw.githubusercontent.com/psilore/stoker/master/src/svg/image.svg)

```xml

  

    

      

        

          

          

          

        

        

          

          

          

        

      

    

  

```

#### Download

![Download icon](https://raw.githubusercontent.com/psilore/stoker/master/src/svg/download.svg)

```xml

  

    

      

        

          

        

        

        

      

    

  

```

#### Magnifying glass

![Magnifying glass icon](https://raw.githubusercontent.com/psilore/stoker/master/src/svg/magnifying-glass.svg)

```xml

  

    

      

        

          

        

        

        

        

      

    

  

```