Add Icons, fix CSS and update Reademe.

DennisSuitters · Feb 10, 2019 · 9a03cb8 · 9a03cb8
1 parent ee76116
commit 9a03cb8
Show file tree

Hide file tree

Showing 33 changed files with 55 additions and 237 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-Born out of frustration of other Icon Sets not containing Icons needed when developing LibreCMS, we created LibreICONS to fill the gap that we needed, and ended up consolidating all the Icons we were using into one set.
+LibreICONS has been developed to provide SVG Icons for LibreCMS, we then decided to seperate them out and make them available to eveyone.
 
 What sets LibreICONS apart from the rest, are the little things.
 - The Icons are sized to 12px x 12px inside a 14px x 14px viewBox.
@@ -8,16 +8,28 @@ What sets LibreICONS apart from the rest, are the little things.
 - The standard and original icon set contains no colour or sizing so they can be controlled via CSS or manipulated easily.
 
 Using the Icons:
-After downloading the project, copy the libreicons-svg.css or libreicons-svg.min.css file from the project css/ folder, and the svg/ folder directory into your project.
+After downloading the project, copy the libreicons-svg.css (already minified) file from the project css/ folder, and the svg/ folder directory into your project. You can change where you put either the css or svg files where you like, as long as your file paths are accessible. The CSS only provides styling, it does not reference the SVG files allowing you to access them in any way you like.
 
 In the `<head>` of your html, reference the location to your libreicons-svg.css.
 `<link rel="stylesheet" href="path/to/libreicons/css/libreicons-svg.css">`
-To use the icons in your pages you use
-`<i class="libre">[svg file to include]</i>`
+To use the icons in your pages you use `<i class="libre">[svg file to include]</i>`
 You can alternatively use any inline element.
 
-Or you could do like we do with LibreCMS and use a PHP Function to inject the SVG File directly into your generated pages. This also allows you to have more control over the size, colour, and animation of your icons.
+There are also CSS classes for controlling sizing such as:
+`libre-2x` `libre-3x` `libre-4x` `libre-5x` for sizing.
+`libre-fw` for fixed width.
 
-TODO:
-- Experiment with multi-coloured CSS controlled Icons.
-- Continue adding Colour Icons and editing existing ones.
+Also included is popular Social Network styles:
+`libre-social` for each icon.
+Each Social SVG contains a class in the SVG file, and the CSS contains the colour needed for each Social Network Icon.
+
+Or you could do like we do with LibreCMS and use a PHP Function to inject the SVG File directly into your generated pages.
+This also allows you to have more control over the size, colour, and animation of your icons, as the function essentially inlines the icons into the HTML.
+
+````php
+function svg($svg,$class=null,$size=null){
+	echo'<i class="libre'.($size!=null?' libre-'.$size:'').($class!=null?' '.$class:'').'">'.file_get_contents([Edit this to reflect your svg access folder]$svg.'.svg').'</i>';
+}
+````
+
+You should edit the `[Edit this to reflect your svg access folder]` to point to where the svg files have been placed.
diff --git a/css/libreicons-svg.css b/css/libreicons-svg.css
diff --git a/requests-color/libre-brand-google-photos.svg b/requests-color/libre-brand-google-photos.svg
diff --git a/svg/libre-barrel-oil.svg b/svg/libre-barrel-oil.svg