Merge pull request #129 from creativecommons/new_icons

Add new icons for Medium and CC filled letterheart
cc-archive · Aug 19, 2020 · bc68554 · bc68554
2 parents a0ea2b0 + 9668b06
commit bc68554
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 14 deletions.
diff --git a/src/fonts/VocabularyIcons.json b/src/fonts/VocabularyIcons.json
@@ -2,7 +2,7 @@
   "metadata": {
     "name": "Vocabulary Icons",
     "lastOpened": 0,
-    "created": 1595042914926
+    "created": 1597847859289
   },
   "iconSets": [
     {
@@ -962,6 +962,15 @@
           "code": 60430,
           "tempChar": "",
           "ligatures": "ccletterheart"
+        },
+        {
+          "order": 542,
+          "id": 79,
+          "name": "letterheart-filled",
+          "prevSize": 32,
+          "code": 60431,
+          "tempChar": "",
+          "ligatures": "ccletterheartfilled"
         }
       ],
       "id": 3,
@@ -1231,6 +1240,21 @@
           "tags": [
             "letterheart"
           ]
+        },
+        {
+          "id": 79,
+          "paths": [
+            "M511.996 137.198c-137.812-109.395-353.809-80.85-453.132 83.562-32.978 54.59-45.364 118.058-42.453 181.070 5.049 109.298 51.698 204.838 120.219 287.286 92.264 111.018 225.654 198.258 372.448 263.36l0.276 0.122c0.566 0.25 1.824 0.804 2.642 1.172 0.892-0.38 2.456-1.092 2.936-1.306 146.038-65.102 280.17-152.35 372.43-263.348 68.524-82.444 115.17-177.988 120.218-287.286 2.912-63.014-9.474-126.482-42.454-181.070-99.322-164.413-315.318-192.957-453.13-83.562zM445.258 487.050l62.74 31.454c-11.602 27.504-40.556 53.012-66.618 66.228-33.674 17.076-73.27 18.946-109.636 10.904-74.582-16.492-109.302-79.682-110.596-152.834-1.268-71.564 34.858-137.922 106.18-157.228 67.028-18.144 146.102 3.998 179.844 69.104l-68.502 35.516c-7.85-18.488-22.54-39.054-57.020-40.856-53.958-2.822-69.752 49.948-67.884 95.638 1.368 33.45 12.016 73.328 47.99 83.298 45.83 12.7 61.696-9.064 83.502-41.224zM741.004 487.050l62.738 31.454c-11.6 27.504-40.554 53.012-66.616 66.228-33.674 17.076-73.272 18.946-109.636 10.904-74.582-16.492-109.302-79.682-110.598-152.834-1.266-71.564 34.86-137.922 106.182-157.228 67.028-18.144 146.102 3.998 179.844 69.104l-68.502 35.516c-7.85-18.488-22.542-39.054-57.020-40.856-53.958-2.822-69.752 49.948-67.884 95.638 1.368 33.45 12.016 73.328 47.99 83.298 45.83 12.7 61.696-9.064 83.502-41.224z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 0,
+          "tags": [
+            "cc-heart-filled"
+          ]
         }
       ],
       "invisible": false,
@@ -1243,7 +1267,7 @@
           "id": 0,
           "name": "instagram",
           "prevSize": 32,
-          "tempChar": "",
+          "tempChar": "",
           "ligatures": "instagram",
           "code": 60672
         },
@@ -1252,7 +1276,7 @@
           "id": 1,
           "name": "twitter",
           "prevSize": 32,
-          "tempChar": "",
+          "tempChar": "",
           "ligatures": "twitter",
           "code": 60673
         },
@@ -1261,7 +1285,7 @@
           "id": 2,
           "name": "linkedin",
           "prevSize": 32,
-          "tempChar": "",
+          "tempChar": "",
           "ligatures": "linkedin",
           "code": 60674
         },
@@ -1270,7 +1294,7 @@
           "id": 3,
           "name": "facebook",
           "prevSize": 32,
-          "tempChar": "",
+          "tempChar": "",
           "ligatures": "facebook",
           "code": 60675
         },
@@ -1279,7 +1303,7 @@
           "id": 4,
           "name": "pinterest",
           "prevSize": 32,
-          "tempChar": "",
+          "tempChar": "",
           "ligatures": "pinterest",
           "code": 60676
         },
@@ -1289,7 +1313,7 @@
           "name": "slack",
           "prevSize": 32,
           "code": 60677,
-          "tempChar": "",
+          "tempChar": "",
           "ligatures": "slack"
         },
         {
@@ -1298,7 +1322,7 @@
           "name": "reddit",
           "prevSize": 32,
           "code": 60678,
-          "tempChar": "",
+          "tempChar": "",
           "ligatures": "reddit"
         },
         {
@@ -1307,7 +1331,7 @@
           "name": "github",
           "prevSize": 32,
           "code": 60679,
-          "tempChar": "",
+          "tempChar": "",
           "ligatures": "github"
         },
         {
@@ -1316,7 +1340,7 @@
           "name": "WhatsApp",
           "prevSize": 32,
           "code": 60680,
-          "tempChar": "",
+          "tempChar": "",
           "ligatures": "WhatsApp"
         },
         {
@@ -1325,7 +1349,7 @@
           "name": "tumblr",
           "prevSize": 32,
           "code": 60681,
-          "tempChar": "",
+          "tempChar": "",
           "ligatures": "tumblr"
         },
         {
@@ -1334,7 +1358,7 @@
           "name": "sms",
           "prevSize": 32,
           "code": 60688,
-          "tempChar": "",
+          "tempChar": "",
           "ligatures": "sms"
         },
         {
@@ -1343,8 +1367,17 @@
           "name": "messenger",
           "prevSize": 32,
           "code": 60689,
-          "tempChar": "",
+          "tempChar": "",
           "ligatures": "messenger"
+        },
+        {
+          "order": 543,
+          "id": 12,
+          "name": "medium",
+          "prevSize": 32,
+          "code": 60690,
+          "tempChar": "",
+          "ligatures": "medium"
         }
       ],
       "id": 6,
@@ -1353,7 +1386,7 @@
         "license": "MIT",
         "designer": "",
         "importSize": {
-          "width": 512,
+          "width": 448,
           "height": 512
         }
       },
@@ -1547,6 +1580,22 @@
           "tags": [
             "messenger"
           ]
+        },
+        {
+          "id": 12,
+          "paths": [
+            "M0 64v896h896v-896h-896zM744.4 276.2l-48 46c-4.2 3.2-6.2 8.4-5.4 13.4v338.6c-0.8 5.2 1.2 10.4 5.4 13.4l47 46v10.2h-236v-9.8l48.6-47.2c4.8-4.8 4.8-6.2 4.8-13.4v-273.8l-135.2 343.2h-18.2l-157.4-343.2v230c-1.4 9.6 2 19.4 8.8 26.4l63.2 76.6v10.2h-179.6v-10.2l63.2-76.6c6.8-7 9.8-16.8 8.2-26.4v-266c0.8-7.4-2-14.6-7.6-19.6l-56.2-67.8v-10.2h174.6l134.8 296 118.6-295.8h166.4v10z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "width": 896,
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 0,
+          "tags": [
+            "medium"
+          ]
         }
       ],
       "colorThemes": [],

diff --git a/src/fonts/VocabularyIcons.ttf b/src/fonts/VocabularyIcons.ttf
diff --git a/src/fonts/VocabularyIcons.woff b/src/fonts/VocabularyIcons.woff
diff --git a/src/stories/vocabulary_icons.stories.mdx b/src/stories/vocabulary_icons.stories.mdx
@@ -221,6 +221,9 @@ directly copy-pasted into a different location.
   <IconItem name="cc-letterheart">
     <i class="icon cc-letterheart"></i>
   </IconItem>
+  <IconItem name="cc-letterheart-filled">
+    <i class="icon cc-letterheart-filled"></i>
+  </IconItem>
 </IconGallery>
 
 To have a white fill inside the icons, use the class `.has-background-white`. It's subtle but it's there.
@@ -290,6 +293,9 @@ To have a white fill inside the icons, use the class `.has-background-white`. It
   <IconItem name="messenger">
     <i class="icon messenger"></i>
   </IconItem>
+  <IconItem name="medium">
+    <i class="icon medium"></i>
+  </IconItem>
 </IconGallery>
 
 ### Colored
@@ -333,6 +339,9 @@ Using the `.colored` class, you can use a colored version of these icons.
   <IconItem name="messenger">
     <i class="icon messenger colored"></i>
   </IconItem>
+  <IconItem name="medium">
+    <i class="icon medium colored"></i>
+  </IconItem>
 </IconGallery>
 
 # Usage

diff --git a/src/styles/vocabulary_icons.scss b/src/styles/vocabulary_icons.scss
@@ -83,6 +83,7 @@ $icons: (
   "cc-share": "\ec0a",
   "cc-pd-alt": "\ec0d",
   "cc-letterheart": "\ec0e",
+  "cc-letterheart-filled": "\ec0f",
 
   "instagram": "\ed00",
   "twitter": "\ed01",
@@ -96,6 +97,7 @@ $icons: (
   "tumblr": "\ed09",
   "sms": "\ed10",
   "messenger": "\ed11",
+  "medium": "\ed12"
 );
 
 @mixin icon($icon-class, $icon-codepoint) {
@@ -120,6 +122,7 @@ $whatsapp-brand: #25d366;
 $tumblr-brand: #35465c;
 $sms-brand: #4aae20;
 $messenger-brand: #0084ff;
+$medium-brand: #292929;
 $brand-colors: (
   "facebook": $facebook-brand,
   "twitter": $twitter-brand,
@@ -133,6 +136,7 @@ $brand-colors: (
   "tumblr": $tumblr-brand,
   "sms": $sms-brand,
   "messenger": $messenger-brand,
+  "medium": $medium-brand
 );
 
 @mixin branded-icon($icon-class, $icon-color) {