From 4ce298225edb25499fe940c45bdfe07f2ef3aa2d Mon Sep 17 00:00:00 2001 From: Thomas Bui Date: Sun, 5 Sep 2021 10:17:09 -0700 Subject: [PATCH 1/3] Webpage now displays of SVG --- docs/assets/js/script.js | 3 +++ docs/index.html | 25 ++++++++++++++++++------- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/docs/assets/js/script.js b/docs/assets/js/script.js index c60bc23f4..33f5b3a0e 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 eaacb2b5b..e5ce4e138 100644 --- a/docs/index.html +++ b/docs/index.html @@ -66,13 +66,16 @@

Font versions +

Put 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>
+

*Change the element's font-size to change the size of the icon

  • SVG versions

    @@ -81,10 +84,18 @@

    SVG versions

    • +

    Using <img> element

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

    Using Pure SVG

    - <svg viewBox="0 0 128 128">
    -
    {{selectedSvgIcon}}
    - </svg> + <svg viewBox="0 0 128 128">
    +
    {{selectedSvgIcon}}
    + </svg>
    From 33a4ada20f94270817f8695ff9f3076abbb673da Mon Sep 17 00:00:00 2001 From: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com> Date: Mon, 6 Sep 2021 18:23:14 -0700 Subject: [PATCH 2/3] Update docs/index.html Co-authored-by: David Leal --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index e5ce4e138..24fb5d1c8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -66,7 +66,7 @@

    Font versions -

    Put this in your header

    +

    Place this in your header

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@{{ latestReleaseTagging }}/devicon.min.css">
    From 005312befb85572030b9db23e95abbec38cfac09 Mon Sep 17 00:00:00 2001 From: Thomas Bui Date: Mon, 6 Sep 2021 18:45:57 -0700 Subject: [PATCH 3/3] Add a hint to change width/height for svg/img --- docs/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index e5ce4e138..5ada43e0a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -75,7 +75,7 @@

    Font versions
    <i class="devicon-{{selectedIcon.name}}-{{selectedFontIcon}} colored"></i>
    -

    *Change the element's font-size to change the size of the icon

    +

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

  • SVG versions

    @@ -88,6 +88,7 @@

    SVG versions <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


    @@ -97,6 +98,7 @@

    SVG versions {{selectedSvgIcon}} </svg> +

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