refactor(icons): rename social- to -logo

Closes #879 #612 #862 #864

ionic/components/icon/icon.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Attribute, Renderer} from 'angular2/core';
+import {Directive, Input, ElementRef, Renderer} from 'angular2/core';
 
 import {Config} from '../../config/config';
 
@@ -16,7 +16,7 @@ import {Config} from '../../config/config';
  * <ion-icon name="star"></ion-icon>
  *
  * <!-- explicity set the icon for each platform -->
- * <ion-icon ios="ion-ios-home" md="ion-md-home"></ion-icon>
+ * <ion-icon ios="ios-home" md="md-home"></ion-icon>
  * ```
  *
  * @property {string} [name] - Use the appropriate icon for the mode.
@@ -47,6 +47,10 @@ export class Icon {
     private _renderer: Renderer
   ) {
     this.mode = config.get('iconMode');
+    this._name = '';
+    this._ios = '';
+    this._md = '';
+    this._css = '';
 
     if (_elementRef.nativeElement.tagName === 'ICON') {
       // deprecated warning
@@ -59,30 +63,51 @@ export class Icon {
   /**
    * @private
    */
-  ngOnInit() {
-    if (this.mode == 'ios' && this.ios) {
-      this.name = this.ios;
+  get name() {
+    return this._name;
+  }
 
-    } else if (this.mode == 'md' && this.md) {
-      this.name = this.md;
+  /**
+   * @private
+   */
+  set name(val) {
+    if (!(/md-|ios-|-logo/.test(val))) {
+      // this does not have one of the defaults
+      // so lets auto add in the mode prefix for them
+      val = this.mode + '-' + val;
     }
-
-    if (!this.name) return;
-
-    if (!(/^ion-/.test(this.name))) {
-      // not an exact icon being used
-      // add mode specific prefix
-      this.name = 'ion-' + this.mode + '-' + this.name;
-    }
-
+    this._name = val;
     this.update();
   }
 
   /**
    * @private
    */
-  addClass(className) {
-    this._renderer.setElementClass(this._elementRef, className, true);
+  get ios() {
+    return this._ios;
+  }
+
+  /**
+   * @private
+   */
+  set ios(val) {
+    this._ios = val;
+    this.update();
+  }
+
+  /**
+   * @private
+   */
+  get md() {
+    return this._md;
+  }
+
+  /**
+   * @private
+   */
+  set md(val) {
+    this._md = val;
+    this.update();
   }
 
   get isActive() {
@@ -101,29 +126,39 @@ export class Icon {
    * @private
    */
   update() {
-    if (this.name && this.mode == 'ios') {
+    let css = 'ion-';
 
-      if (this.isActive) {
-        if (/-outline/.test(this.name)) {
-          this.name = this.name.replace('-outline', '');
-        }
+    if (this._ios && this.mode === 'ios') {
+      css += this._ios;
 
-      } else if (!(/-outline/.test(this.name))) {
-        this.name += '-outline';
-      }
+    } else if (this._md && this.mode === 'md') {
+      css += this._md;
 
+    } else {
+      css += this._name;
     }
 
-    if (this._name !== this.name) {
-      if (this._name) {
-        this._renderer.setElementClass(this._elementRef, this._name, false);
+    if (this.mode == 'ios' && !this.isActive) {
+      css += '-outline';
+    }
+
+    if (this._css !== css) {
+      if (this._css) {
+        this._renderer.setElementClass(this._elementRef, this._css, false);
       }
-      this._name = this.name;
-      this._renderer.setElementClass(this._elementRef, this.name, true);
+      this._css = css;
+      this._renderer.setElementClass(this._elementRef, css, true);
 
       this._renderer.setElementAttribute(this._elementRef, 'aria-label',
-          this.name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' '));
+          css.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' '));
     }
   }
 
+  /**
+   * @private
+   */
+  addClass(className) {
+    this._renderer.setElementClass(this._elementRef, className, true);
+  }
+
 }

ionic/components/icon/test/basic/index.ts

@@ -8,10 +8,24 @@ class E2EApp {
   constructor() {
     this.homeIcon = 'home';
     this.isActive = false;
-    this.btnIcon = 'home';
+
+    this.iconIndex = 0;
+    this.icons = [
+      'home',
+      'star',
+      'ios-alert',
+      'ios-alert-outline',
+      'md-alert',
+      'apple-logo'
+    ];
+    this.btnIcon = this.icons[0];
   }
 
   updateIcon() {
-    this.btnIcon = (this.btnIcon === 'home' ? 'star' : 'home');
+    this.iconIndex++;
+    if (this.iconIndex >= this.icons.length) {
+      this.iconIndex = 0;
+    }
+    this.btnIcon = this.icons[this.iconIndex];
   }
 }

ionic/components/icon/test/basic/main.html

@@ -10,49 +10,63 @@
     <ion-item>
       <ion-icon name="home" item-left></ion-icon>
       <code>
-        &lt;ion-icon name="home">&lt;/ion-icon>
+        name="home"
       </code>
     </ion-item>
 
     <ion-item>
       <ion-icon [name]="homeIcon" item-left></ion-icon>
       <code>
-        &lt;ion-icon [name]="homeIcon">&lt;/ion-icon>
+        [name]="homeIcon"
       </code>
     </ion-item>
 
     <ion-item>
-      <ion-icon name="ion-social-twitter" item-left></ion-icon>
+      <ion-icon name="home" isActive="true" item-left></ion-icon>
       <code>
-        &lt;ion-icon name="ion-social-twitter">&lt;/ion-icon>
+        name="home" isActive="true"
       </code>
     </ion-item>
 
     <ion-item>
-      <ion-icon ios="ion-social-apple" md="ion-social-android" item-left></ion-icon>
+      <ion-icon name="home" [isActive]="isActive" item-left></ion-icon>
       <code>
-        &lt;ion-icon ios="ion-social-apple" md="ion-social-android">&lt;/ion-icon>
+        name="home" [isActive]="isActive"
       </code>
     </ion-item>
 
     <ion-item>
-      <ion-icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android" item-left></ion-icon>
+      <ion-icon name="ios-home" item-left></ion-icon>
       <code>
-        &lt;ion-icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android">&lt;/ion-icon>
+        name="ios-home"
       </code>
     </ion-item>
 
     <ion-item>
-      <ion-icon ios="ion-social-apple" item-left></ion-icon>
+      <ion-icon name="ios-home-outline" item-left></ion-icon>
       <code>
-        &lt;ion-icon ios="ion-social-apple">&lt;/ion-icon>
+        name="ios-home-outline"
       </code>
     </ion-item>
 
     <ion-item>
-      <ion-icon md="ion-social-android" item-left></ion-icon>
+      <ion-icon name="md-home" item-left></ion-icon>
       <code>
-        &lt;ion-icon md="ion-social-android">&lt;/ion-icon>
+        name="md-home"
+      </code>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="twitter-logo" item-left></ion-icon>
+      <code>
+        name="twitter-logo"
+      </code>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon ios="apple-logo" md="android-logo" item-left></ion-icon>
+      <code>
+        ios="apple-logo" md="android-logo"
       </code>
     </ion-item>
 

ionic/fonts/ionicons-icons.scss

@@ -2,6 +2,27 @@
 // Ionicons Icon Font CSS
 // --------------------------
 
+.ion-android-logo:before { content: "\f225"; }
+.ion-angular-logo:before { content: "\f227"; }
+.ion-apple-logo:before { content: "\f229"; }
+.ion-bitcoin-logo:before { content: "\f22b"; }
+.ion-buffer-logo:before { content: "\f22d"; }
+.ion-chrome-logo:before { content: "\f22f"; }
+.ion-codepen-logo:before { content: "\f230"; }
+.ion-css3-logo:before { content: "\f231"; }
+.ion-designernews-logo:before { content: "\f232"; }
+.ion-dribbble-logo:before { content: "\f233"; }
+.ion-dropbox-logo:before { content: "\f234"; }
+.ion-euro-logo:before { content: "\f235"; }
+.ion-facebook-logo:before { content: "\f236"; }
+.ion-foursquare-logo:before { content: "\f237"; }
+.ion-freebsd-devil-logo:before { content: "\f238"; }
+.ion-github-logo:before { content: "\f239"; }
+.ion-google-logo:before { content: "\f23a"; }
+.ion-googleplus-logo:before { content: "\f23b"; }
+.ion-hackernews-logo:before { content: "\f23c"; }
+.ion-html5-logo:before { content: "\f23d"; }
+.ion-instagram-logo:before { content: "\f23e"; }
 .ion-ios-add:before { content: "\f102"; }
 .ion-ios-add-circle:before { content: "\f101"; }
 .ion-ios-add-circle-outline:before { content: "\f100"; }
@@ -588,6 +609,9 @@
 .ion-ios-wine-outline:before { content: "\f26e"; }
 .ion-ios-woman:before { content: "\f271"; }
 .ion-ios-woman-outline:before { content: "\f270"; }
+.ion-javascript-logo:before { content: "\f23f"; }
+.ion-linkedin-logo:before { content: "\f240"; }
+.ion-markdown-logo:before { content: "\f241"; }
 .ion-md-add:before { content: "\f273"; }
 .ion-md-add-circle:before { content: "\f272"; }
 .ion-md-alarm:before { content: "\f274"; }
@@ -888,51 +912,27 @@
 .ion-md-wifi:before { content: "\f3a8"; }
 .ion-md-wine:before { content: "\f3a9"; }
 .ion-md-woman:before { content: "\f3aa"; }
-.ion-social-android:before { content: "\f225"; }
-.ion-social-angular:before { content: "\f4d9"; }
-.ion-social-apple:before { content: "\f227"; }
-.ion-social-bitcoin:before { content: "\f2af"; }
-.ion-social-buffer:before { content: "\f229"; }
-.ion-social-chrome:before { content: "\f4db"; }
-.ion-social-codepen:before { content: "\f4dd"; }
-.ion-social-css3:before { content: "\f4df"; }
-.ion-social-designernews:before { content: "\f22b"; }
-.ion-social-dribbble:before { content: "\f22d"; }
-.ion-social-dropbox:before { content: "\f22f"; }
-.ion-social-euro:before { content: "\f4e1"; }
-.ion-social-facebook:before { content: "\f231"; }
-.ion-social-foursquare:before { content: "\f34d"; }
-.ion-social-freebsd-devil:before { content: "\f2c4"; }
-.ion-social-github:before { content: "\f233"; }
-.ion-social-google:before { content: "\f34f"; }
-.ion-social-googleplus:before { content: "\f235"; }
-.ion-social-hackernews:before { content: "\f237"; }
-.ion-social-html5:before { content: "\f4e3"; }
-.ion-social-instagram:before { content: "\f351"; }
-.ion-social-javascript:before { content: "\f4e5"; }
-.ion-social-linkedin:before { content: "\f239"; }
-.ion-social-markdown:before { content: "\f4e6"; }
-.ion-social-nodejs:before { content: "\f4e7"; }
-.ion-social-octocat:before { content: "\f4e8"; }
-.ion-social-pinterest:before { content: "\f2b1"; }
-.ion-social-playstation:before { content: "\f3ab"; }
-.ion-social-python:before { content: "\f4e9"; }
-.ion-social-reddit:before { content: "\f23b"; }
-.ion-social-rss:before { content: "\f23d"; }
-.ion-social-sass:before { content: "\f4ea"; }
-.ion-social-skype:before { content: "\f23f"; }
-.ion-social-snapchat:before { content: "\f4ec"; }
-.ion-social-steam:before { content: "\f3ac"; }
-.ion-social-tumblr:before { content: "\f241"; }
-.ion-social-tux:before { content: "\f2c5"; }
-.ion-social-twitch:before { content: "\f4ee"; }
-.ion-social-twitter:before { content: "\f243"; }
-.ion-social-usd:before { content: "\f353"; }
-.ion-social-vimeo:before { content: "\f245"; }
-.ion-social-whatsapp:before { content: "\f4f0"; }
-.ion-social-windows:before { content: "\f247"; }
-.ion-social-wordpress:before { content: "\f249"; }
-.ion-social-xbox:before { content: "\f3ad"; }
-.ion-social-yahoo:before { content: "\f24b"; }
-.ion-social-yen:before { content: "\f4f2"; }
-.ion-social-youtube:before { content: "\f24d"; }
+.ion-nodejs-logo:before { content: "\f242"; }
+.ion-octocat-logo:before { content: "\f243"; }
+.ion-pinterest-logo:before { content: "\f244"; }
+.ion-playstation-logo:before { content: "\f245"; }
+.ion-python-logo:before { content: "\f246"; }
+.ion-reddit-logo:before { content: "\f247"; }
+.ion-rss-logo:before { content: "\f248"; }
+.ion-sass-logo:before { content: "\f249"; }
+.ion-skype-logo:before { content: "\f24a"; }
+.ion-snapchat-logo:before { content: "\f24b"; }
+.ion-steam-logo:before { content: "\f24c"; }
+.ion-tumblr-logo:before { content: "\f24d"; }
+.ion-tux-logo:before { content: "\f2ae"; }
+.ion-twitch-logo:before { content: "\f2af"; }
+.ion-twitter-logo:before { content: "\f2b0"; }
+.ion-usd-logo:before { content: "\f2b1"; }
+.ion-vimeo-logo:before { content: "\f2c4"; }
+.ion-whatsapp-logo:before { content: "\f2c5"; }
+.ion-windows-logo:before { content: "\f32f"; }
+.ion-wordpress-logo:before { content: "\f330"; }
+.ion-xbox-logo:before { content: "\f34c"; }
+.ion-yahoo-logo:before { content: "\f34d"; }
+.ion-yen-logo:before { content: "\f34e"; }
+.ion-youtube-logo:before { content: "\f34f"; }