Replace slack-self-invite.svg with icon-slack.svg on CoP page (hackfo…

…rla#6141)

* replace slack-self-invite.svg with icon-slack.svg on CoP page

* fix css for slack self invite svg

_sass/components/_communities-of-practice.scss

@@ -5,11 +5,13 @@
   margin-top: 31px;
 
   .self-invite-img {
-    /*Note "margin-top: 15px" is needed to keep this img aligned with neighboring text*/
-    margin-top: 15px;
-    margin-right: 27px;
-    width: 24px;
-    height: 24px;
+    color: #fa114f;
+    margin-top: 14px;
+    margin-right: 26px;
+    margin-left: -1px;
+    width: 26px;
+    height: 26px;
+    min-width: 26px;
   }
 
   .alert--communities {

pages/communities-of-practice.html

@@ -15,7 +15,9 @@ <h1 class="title1">Communities of Practice</h1>
             If you'd like to join one of the Communities of Practice that has a regular meeting time, join their Slack channel and look for the meeting details, usually pinned or in the description. Otherwise, see the "How to get started" sections below.
         </p>
             <div class="header-self-invite--communities">
-                <img class="self-invite-img" src="/assets/images/communities-of-practice/slack-self-invite.svg" alt="slack icon" />
+                <svg version="1.1" class="self-invite-img" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg" width="100%">
+                    {% include svg/icon-slack.svg %}
+                </svg>
                 <p class="alert--communities">To join the Slack channels below, you first need to be a member of our Hack for LA Slack Community. If you have not joined yet, please follow the steps in <a href="/getting-started" target="_blank">Getting Started</a>.
             </p></div>
     </div>