THIS IS NO LONGER REQUIRED EXCEPT FOR VERY CUSTOM ICONS A CLIENT MIGHT REQUIRE. INSTEAD, USE THE "SOCIAL ICONS" WORDPRESS BLOCK AND THE CSS OVERIDE STYLES FOR THOSE BLOCKS WE ALREADY HAVE IN OUR THEME.


The SVGs in this folder are intended to be uploaded to the WordPress media library for easier editing by clients.

The SVGs in this folder have a fill and a width and height set on them using html attributes. The height and width can be overidden using the width and height CSS attributes in your stylesheet. When uploaded to the wordpress admin, the color of the icon (on hover as well) cannot be changed using the CSS "fill" property. Instead use the various CSS "filter" properties. NOte that the icons in  this folder are colored blue. This ensures that the css filter: hue-rotate() property can be used to change color. If the icons are black, gray or white, no change of color is possible with filter. The blue icons, however, can be changed to black or white using filter: grayscale() and brightness().


If using these customized icons and not those provided by wordpress, upload the custom SVGs to the media gallery give them the class "applySocialIconFilter" and add this (adjusted for color etc) CSS to your stylesheet:

figure.applySocialIconFilter img{
	filter: grayscale(2) brightness(20);
	transition: filter .5s;
}
figure.applySocialIconFilter img:hover{
	filter: grayscale(2) brightness(10);
}