Skip to content

Commit

Permalink
feat: Release Solid Unicons v3.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
tarunmangukiya authored Aug 12, 2020
2 parents 2e11740 + d2d6271 commit e595a5d
Show file tree
Hide file tree
Showing 207 changed files with 407 additions and 82 deletions.
5 changes: 3 additions & 2 deletions .github/workflows/npm-publish-rc-pro.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Publish Monochrome PRO to NPM RC
name: Publish PRO Icons to NPM RC

on:
push:
Expand All @@ -18,10 +18,11 @@ jobs:
with:
node-version: 10.16.3
- name: Download & Build Icons
run: npm ci --progress=false && npm run monochrome:build
run: npm ci --progress=false && npm run line:build && npm run solid:build && npm run monochrome:build
env:
CI_COMMIT_REF_NAME: ${{ steps.extract_version.outputs.VERSION }}
API_DOWNLOAD_LINE: ${{ secrets.API_DOWNLOAD_LINE }}
API_DOWNLOAD_SOLID: ${{ secrets.API_DOWNLOAD_SOLID_PRO }}
API_DOWNLOAD_MONOCHROME: ${{ secrets.API_DOWNLOAD_MONOCHROME_PRO }}
RELEASE_DIR: "release-pro"
- name: Publish to CDN
Expand Down
5 changes: 3 additions & 2 deletions .github/workflows/npm-publish-rc.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Publish to NPM RC
name: Publish Icons to NPM RC

on:
push:
Expand All @@ -18,10 +18,11 @@ jobs:
with:
node-version: 10.16.3
- name: Download & Build Icons
run: npm ci --progress=false && npm run line:build && npm run monochrome:build
run: npm ci --progress=false && npm run line:build && npm run solid:build && npm run monochrome:build
env:
CI_COMMIT_REF_NAME: ${{ steps.extract_version.outputs.VERSION }}
API_DOWNLOAD_LINE: ${{ secrets.API_DOWNLOAD_LINE }}
API_DOWNLOAD_SOLID: ${{ secrets.API_DOWNLOAD_SOLID }}
API_DOWNLOAD_MONOCHROME: ${{ secrets.API_DOWNLOAD_MONOCHROME }}
RELEASE_DIR: "release"
- name: Create Pull Request
Expand Down
5 changes: 3 additions & 2 deletions .github/workflows/npm-publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@ jobs:
with:
node-version: 10.16.3
- name: Download & Build Icons
run: npm ci --progress=false && npm run line:build && npm run monochrome:build
run: npm ci --progress=false && npm run line:build && npm run solid:build && npm run monochrome:build
env:
CI_COMMIT_REF_NAME: ${{ steps.extract_version.outputs.VERSION }}
API_DOWNLOAD_LINE: ${{ secrets.API_DOWNLOAD_LINE }}
API_DOWNLOAD_SOLID: ${{ secrets.API_DOWNLOAD_SOLID }}
API_DOWNLOAD_MONOCHROME: ${{ secrets.API_DOWNLOAD_MONOCHROME }}
- name: Create Pull Request
uses: peter-evans/create-pull-request@v1
Expand All @@ -40,7 +41,7 @@ jobs:
with:
node-version: 10.16.3
- name: Publish to NPM
run: echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc && npm publish
run: printf "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc && npm publish --access=public
env:
NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
- name: Upload Artifact
Expand Down
15 changes: 13 additions & 2 deletions .github/workflows/update-icons.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,21 @@ jobs:
- uses: actions/setup-node@v1
with:
node-version: 10.16.3
- name: Download Icons
run: npm ci --progress=false && npm run line:download && npm run monochrome:download
- name: Download Line Icons
run: npm ci --progress=false && npm run line:download
env:
API_DOWNLOAD_LINE: ${{ secrets.API_DOWNLOAD_LINE }}
STYLE: line
CSS_PREFIX: uil
- name: Download Solid Icons
run: npm run line:download
env:
API_DOWNLOAD_SOLID: ${{ secrets.API_DOWNLOAD_SOLID }}
STYLE: solid
CSS_PREFIX: uis
- name: Download Monochrome Icons
run: npm run monochrome:download
env:
API_DOWNLOAD_MONOCHROME: ${{ secrets.API_DOWNLOAD_MONOCHROME }}
- name: Create Pull Request
uses: peter-evans/create-pull-request@v1
Expand Down
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ node_modules

# Env files
.env
.npmrc

# Fontello Build Files
dist/
Expand All @@ -13,4 +14,6 @@ config.json
fonts/*
script/*
sprite/*
css/unicons*
css/unicons*
css/line.css
css/solid.css
24 changes: 20 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
It's easy to use Unicons on your website by just inserting following css. You can also download this repo and use the css from `css` folder.

```html
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.11/css/unicons.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.0/css/unicons.css">
```

And use the icons in your `body` as below.
Expand All @@ -25,13 +25,29 @@ npm install --save @iconscout/unicons
### Using as an SVG
If you're a designer then it's always great to have SVG files. You can download SVGs from [Official Unicons Website](https://iconscout.com/unicons) or [download Icondrop](https://iconscout.com/icondrop) to access these icons right into Sketch, Adobe Xd, Adobe Illustrator, and many more.

### Use with JS Frameworks

We've created components for popular libraries like React, VueJS, React Native. You can head over to official GitHub Repo to know more.

#### Line Style
- For React: https://github.com/Iconscout/react-unicons
- For VueJS: https://github.com/Iconscout/vue-unicons
- For React Native: https://github.com/Iconscout/react-native-unicons

#### Solid Style
- For React: https://github.com/Iconscout/react-unicons-solid
- For VueJS: https://github.com/Iconscout/vue-unicons-solid

#### Monochrome Style
- For React: https://github.com/Iconscout/react-unicons-monochrome

### More ways (Community supported)
- [Vue-unicons](https://github.com/antonreshetov/vue-unicons) by [Anton Reshetov](https://github.com/antonreshetov)

## Roadmap
- [ ] Make React Components
- [ ] Adding Brand Icons
- [ ] Designing Solid Style
- [x] Make React Components
- [x] Adding Brand Icons
- [x] Designing Solid Style
- [ ] Designing Thin-line Style
- [ ] Support for CSS Animations
- [ ] Make SVG Sprite in which user can control different attributes such as stroke, fill, width, height and more.
Expand Down
52 changes: 19 additions & 33 deletions css/before.css
Original file line number Diff line number Diff line change
@@ -1,83 +1,69 @@
[class^="uil-"]:before,
[class*=" uil-"]:before {
font-family: "unicons";
[class^="{CSS_PREFIX}-"]:before,
[class*=" {CSS_PREFIX}-"]:before {
font-family: "unicons-{STYLE}";
font-style: normal;
font-weight: normal;
speak: none;

display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: 0.2em;
text-align: center;
/* opacity: .8; */

/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;

/* fix buttons height, for twitter bootstrap */
line-height: 1em;

/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: 0.2em;

/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
line-height: 1;

/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

/* Flip and Rotate */

[class*="uil-"].flip-horizontal:before {
[class*="{CSS_PREFIX}-"].flip-horizontal:before {
transform: scaleX(-1);
}
[class*="uil-"].flip-horizontal.rotate-90:before {
[class*="{CSS_PREFIX}-"].flip-horizontal.rotate-90:before {
transform: rotate(90deg) scaleX(-1);
}
[class*="uil-"].flip-horizontal.rotate-180:before {
[class*="{CSS_PREFIX}-"].flip-horizontal.rotate-180:before {
transform: rotate(180deg) scaleX(-1);
}
[class*="uil-"].flip-horizontal.rotate-270:before {
[class*="{CSS_PREFIX}-"].flip-horizontal.rotate-270:before {
transform: rotate(270deg) scaleX(-1);
}
[class*="uil-"].flip-horizontal.flip-vertical:before {
[class*="{CSS_PREFIX}-"].flip-horizontal.flip-vertical:before {
transform: scale(-1);
}
[class*="uil-"].flip-horizontal.flip-vertical.rotate-90:before {
[class*="{CSS_PREFIX}-"].flip-horizontal.flip-vertical.rotate-90:before {
transform: rotate(90deg) scale(-1);
}
[class*="uil-"].flip-horizontal.flip-vertical.rotate-180:before {
[class*="{CSS_PREFIX}-"].flip-horizontal.flip-vertical.rotate-180:before {
transform: rotate(180deg) scale(-1);
}
[class*="uil-"].flip-horizontal.flip-vertical.rotate-270:before {
[class*="{CSS_PREFIX}-"].flip-horizontal.flip-vertical.rotate-270:before {
transform: rotate(270deg) scale(-1);
}
[class*="uil-"].flip-vertical:before {
[class*="{CSS_PREFIX}-"].flip-vertical:before {
transform: scaleY(-1);
}
[class*="uil-"].flip-vertical.rotate-90:before {
[class*="{CSS_PREFIX}-"].flip-vertical.rotate-90:before {
transform: rotate(90deg) scaleY(-1);
}
[class*="uil-"].flip-vertical.rotate-180:before {
[class*="{CSS_PREFIX}-"].flip-vertical.rotate-180:before {
transform: rotate(180deg) scaleY(-1);
}
[class*="uil-"].flip-vertical.rotate-270:before {
[class*="{CSS_PREFIX}-"].flip-vertical.rotate-270:before {
transform: rotate(270deg) scaleY(-1);
}
[class*="uil-"].rotate-90:before {
[class*="{CSS_PREFIX}-"].rotate-90:before {
transform: rotate(90deg);
}
[class*="uil-"].rotate-180:before {
[class*="{CSS_PREFIX}-"].rotate-180:before {
transform: rotate(180deg);
}
[class*="uil-"].rotate-270:before {
[class*="{CSS_PREFIX}-"].rotate-270:before {
transform: rotate(270deg);
}
12 changes: 11 additions & 1 deletion index-line.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Unicons</title>
<link rel="stylesheet" href="./css/unicons.css" />
<link rel="stylesheet" href="./css/line.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<h1 style="color: #43ab92;">Icon is here <i class="uil uil-airplay"></i></h1>
Expand Down Expand Up @@ -38,5 +39,14 @@ <h1 style="color: #512c62">
<h1 style="color: #000000">
Icon is here <i class="uil uil-white uil-record-audio"></i>
</h1>

<button type="button" class="btn btn-primary btn-lg">
<i class="uil uil-arrow-circle-right"></i>
Click Me
</button>
<button type="button" class="btn btn-primary">
<i class="uil uil-arrow-circle-right"></i>
Click Me
</button>
</body>
</html>
52 changes: 52 additions & 0 deletions index-solid.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Unicons</title>
<link rel="stylesheet" href="./css/solid.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<h1 style="color: #43ab92;">Icon is here <i class="uis uis-airplay"></i></h1>
<h2 style="color: #f75f00">Icon is here <i class="uis uis-analysis"></i></h2>
<h3 style="color: #c93838">
Icon is here <i class="uis uis-angle-double-up"></i>
</h3>
<h4 style="color: #512c62">
Icon is here <i class="uis uis-arrow-circle-right"></i>
</h4>
<h5 style="color: #000000">
Icon is here <i class="uis uis-arrow-up-right"></i>
</h5>
<p style="color: green">
<i class="uis uis-object-group"></i> Paragraph<i class="uis uis-chart"></i>
</p>

<h1 style="color: #ec9b3b">
Icon is here <i class="uis uis-white uis-clock-ten"></i>
</h1>
<h1 style="color: #f75f00; --uis-color: #000000">
Icon is here <i class="uis uis-white uis-compress"></i>
</h1>
<h1 style="color: #c93838">
Icon is here <i class="uis uis-white uis-scenery"></i>
</h1>
<h1 style="color: #512c62">
Icon is here <i class="uis uis-white uis-horizontal-align-left"></i>
</h1>
<h1 style="color: #000000">
Icon is here <i class="uis uis-white uis-record-audio"></i>
</h1>

<button type="button" class="btn btn-primary btn-lg">
<i class="uis uis-arrow-circle-right"></i>
Click Me
</button>
<button type="button" class="btn btn-primary">
<i class="uis uis-arrow-circle-right"></i>
Click Me
</button>
</body>
</html>
2 changes: 1 addition & 1 deletion json/line.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions json/solid.json

Large diffs are not rendered by default.

51 changes: 48 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit e595a5d

Please sign in to comment.