Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/georgewpark/svg-theming-with-currentcolor

This project demonstrates how the currentColor value can be applied to SVG attributes allowing SVG elements to inherit the CSS color property defined on the nearest parent element.
https://github.com/georgewpark/svg-theming-with-currentcolor

color css currentcolor svg theming

Last synced: about 2 months ago
JSON representation

This project demonstrates how the currentColor value can be applied to SVG attributes allowing SVG elements to inherit the CSS color property defined on the nearest parent element.

Host: GitHub
URL: https://github.com/georgewpark/svg-theming-with-currentcolor
Owner: georgewpark
License: mit
Created: 2022-09-27T13:43:11.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2024-06-29T16:18:22.000Z (6 months ago)
Last Synced: 2024-06-30T21:08:32.075Z (6 months ago)
Topics: color, css, currentcolor, svg, theming
Language: HTML
Homepage: http://cdpn.io/abGmrmr
Size: 605 KB
Stars: 0
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: readme.md
- License: license.md

Awesome Lists containing this project

README

# SVG Theming with currentColor

This project demonstrates how the currentColor value can be applied to SVG attributes allowing SVG elements to inherit the CSS color property defined on the nearest parent element.

![SVG Theming with currentColor Demo](demo-gif.gif 'SVG Theming with currentColor')

## Live Demo

A live demo is available on [CodePen](https://cdpn.io/abGmrmr) and [Netlify](https://svg-theming-currentcolor.netlify.app/).

## License

This project is licensed under the MIT License - see the [license.md](license.md) file for details.

## Project Setup

From the root directory, install project dependencies by running `npm install` from the terminal.

Build the files and start the local dev server by running `npm run dev` from the terminal. This should open the dev site automatically at http://localhost:3000/.

You can build the files without starting the dev server by running `npm run build` from the terminal to compile the development build or `npm run prod` to compile the production build.