diff --git a/docs/assets/js/script.js b/docs/assets/js/script.js index c60bc23f..33f5b3a0 100644 --- a/docs/assets/js/script.js +++ b/docs/assets/js/script.js @@ -88,6 +88,7 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) { $scope.selectedFontIcon = $scope.icons[0].font[0]; $scope.selectedSvgIcon = $scope.selectSvg($scope.icons[0].svg[0], 0); $scope.selectedFontIndex = 0; + $scope.selectedSvgIndex = 0; /*------ End of "Re-format devicon.json" ------*/ }); @@ -101,6 +102,7 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) { $scope.selectedFontIcon = icon.font[0]; $scope.selectedFontIndex = 0; $scope.selectedSvgIcon = $scope.selectSvg(icon.svg[0], 0); + $scope.selectedSvgIndex = 0; // reset color $scope.fontBackground = DEFAULT_BACKGROUND; @@ -154,6 +156,7 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) { } }); } + /*---- End of "Change selected svg icon" ----*/ }); diff --git a/docs/index.html b/docs/index.html index eaacb2b5..295592e0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -66,13 +66,16 @@ +

Place this in your header

+
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@{{ latestReleaseTagging }}/devicon.min.css"> +
+ +

Use this in your body

-
<!-- in your header -->
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@{{ latestReleaseTagging }}/devicon.min.css">
-
-
<!-- in your body -->
<i class="devicon-{{selectedIcon.name}}-{{selectedFontIcon}} colored"></i>
+

*To change the size, change the i's font-size

  • SVG versions

    @@ -81,11 +84,21 @@
  • +

    Using <img> element

    - <svg viewBox="0 0 128 128">
    -
    {{selectedSvgIcon}}
    - </svg> + <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{selectedIcon.svg[selectedSvgIndex]}}.svg" />
    +

    *To change the size, change the img's height and width

    + +
    + +

    Using Pure SVG

    +
    + <svg viewBox="0 0 128 128">
    +
    {{selectedSvgIcon}}
    + </svg> +
    +

    *To change the size, change the svg's height and width