Collection of reusable SVGs with easy integration with CSS.
The easiest way to use the SVG images is to download the .svg files from within the /svgs directory.
The recommended approach is to use the Sass partial in this project. The Sass partial contains a collection of Sass mixins that define an optimised inline SVG as a background-image. To install this project, run the command below.
npm install moov2-svgs --save-dev --save-exact
The next step is to import the mixin partial from within the node_modules/moov2-svgs/sass directory as shown below. The example below assume node_modules is within a root directory that contains a directory that contains the Sass files.
@import "../node_modules/moov2-svgs/sass/svg";
Importing this partial will make all the SVGs available to the Sass stylesheet. Below is an example of a selector that will display a black Twitter logo.
.logo-twitter {
@include svg-twitter-logo(#000);
height: 32px;
width: 32px;
}
Dimensions are never defined in the mixin and should be handled by you..
Logo for Evenbrite.
@include svg-eventbrite-logo($fillColor);
$fillColor: Colour of the logo.
Logo for Facebook.
@include svg-facebook-logo($fillColor);
$fillColor: Colour of the logo.
Logo for Github.
@include svg-github-logo($fillColor);
$fillColor: Colour of the logo.
Logo for Twitter.
@include svg-twitter-logo($fillColor);
$fillColor: Colour of the logo.
Icon for use as a close button in UI.
@include svg-icon-close($fillColor);
$fillColor: Colour of the icon.
Icon for use as a next/previous button in UI.
@include svg-icon-next-prev($fillColor);
$fillColor: Colour of the icon.