Package Logo

docs/logo-and-branding.md

@@ -0,0 +1,57 @@
+---
+id: logo-and-branding
+title: Logo & Branding
+---
+
+The React Leaflet logo provides a way for the community to identify and communicaty the technologies used in their mapping applications. While the library is open source, it's encouraged to follow the best practices definied below to upload the integrity of the logo itself and what it represents.
+
+
+## Logo
+
+### Icon & Wordmark
+
+The primary use is the icon with wordmark. Given the appropriate space available and where possible, this variation should be used in most general applications to represent the full identity of the library.
+
+<img src="/docs/assets/react-leaflet-logo-600x140.jpg" alt="React Leaflet Logo" width="300"/>
+
+### Icon
+
+For use cases that permit smaller space, the icon can be used as a standalone option to represent the React Leaflet library.
+
+<img src="/docs/assets/react-leaflet-icon-400x400.jpg" alt="React Leaflet Icon" width="100"/>
+
+### Usage
+
+The React Leaflet logos should not be modified in any way that distorts the shape or contents of the logo, including but not limited to the following example use cases.
+
+<img src="/docs/assets/react-leaflet-logo-usage.jpg" alt="React Leaflet Logo Usage" width="800"/>
+
+### License
+The React Leaflet logos and assets are licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0/).
+
+### Download
+
+For convenience, the following are packaged up in a `.zip` to download:
+- react-leaflet-icon-transparent-500x500.png
+- react-leaflet-icon-white-500x500.jpg
+- react-leaflet-icon.eps
+- react-leaflet-icon.svg
+- react-leaflet-logo-transparent-1000x280.png
+- react-leaflet-logo-white-1000x280.jpg
+- react-leaflet-logo.eps
+- react-leaflet-logo.svg
+
+[Download All Assets](assets/react-leaflet-logo.zip)
+
+## Colors
+
+Color usage should follow the values below when working with React Leaflet branding or validating the integrity of the use of on of it's logos.
+
+| Color         | Hex           |       |
+| ------------- | ------------- | ----- |
+| primary       | #61BA9E       | <img src="/docs/assets/swatch-61BA9E-50x50.jpg" alt="#61BA9E" width="20" /> |
+| secondary     | #2A473E       | <img src="/docs/assets/swatch-2A473E-50x50.jpg" alt="#2A473E" width="20" /> |
+
+<br />
+
+Logo and scheme originally created by [Colby Fayock](https://www.colbyfayock.com/).

website/i18n/en.json

@@ -29,6 +29,9 @@
       "intro": {
         "title": "Introduction"
       },
+      "logo-and-branding": {
+        "title": "Logo & Branding"
+      },
       "plugins": {
         "title": "Third-party plugins"
       },
@@ -106,7 +109,8 @@
       "Getting started": "Getting started",
       "API": "API",
       "Guides": "Guides",
-      "Extra": "Extra"
+      "Extra": "Extra",
+      "Usage": "Usage"
     }
   },
   "pages-strings": {

website/pages/en/index.js

@@ -13,6 +13,7 @@ const CompLibrary = require('../../core/CompLibrary.js')
 const Container = CompLibrary.Container
 
 const Code = require(process.cwd() + '/core/Code.js')
+const Logo = require(process.cwd() + '/core/Logo.js')
 const siteConfig = require(process.cwd() + '/siteConfig.js')
 
 function docUrl(doc, language) {
@@ -49,7 +50,7 @@ const SplashContainer = props => (
 
 const ProjectTitle = () => (
   <h2 className="projectTitle">
-    {siteConfig.title}
+    <Logo />
     <small>{siteConfig.tagline}</small>
   </h2>
 )

website/sidebars.json

@@ -3,6 +3,7 @@
     "Getting started": ["intro", "setup", "installation", "examples"],
     "API": ["context", "events", "components"],
     "Guides": ["custom-components", "class-hierarchy"],
-    "Extra": ["plugins"]
+    "Extra": ["plugins"],
+    "Usage": ["logo-and-branding"]
   }
 }

website/siteConfig.js

@@ -31,8 +31,10 @@ const siteConfig = {
   users: [],
   favicon: 'img/favicon.png',
   colors: {
-    primaryColor: '#1EB300',
-    secondaryColor: '#160',
+    logoPrimary: '#60BA9D',
+    logoSecondary: '#2A473E',
+    primaryColor: '#41957a',
+    secondaryColor: '#2C5145',
   },
   copyright:
     'Copyright © ' + new Date().getFullYear() + ' Paul Le Cam and contributors',

website/static/css/custom.css

@@ -9,6 +9,12 @@
   max-width: none;
 }
 
+.logo {
+  width: 400px;
+  max-width: 100%;
+  height: auto;
+}
+
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
 }
 

website/versioned_sidebars/version-v2-sidebars.json

@@ -15,6 +15,7 @@
       "version-v2-custom-components",
       "version-v2-class-hierarchy"
     ],
-    "Extra": ["version-v2-plugins"]
+    "Extra": ["version-v2-plugins"],
+    "Usage": ["logo-and-branding"]
   }
 }