Code Monkey home page Code Monkey logo

coreui-icons's Introduction

npm (scoped) npm

CoreUI Icons (1500+ Free icons)- Simply beautiful open source icons

CoreUI Icons is an open-source icon set with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app.

CoreUI Free Icons

Table of Contents

Preview & Docs

https://coreui.io/icons/

Installation

CDN

<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/all.min.css">

or

<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/free.min.css">
<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/brand.min.css">
<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/flag.min.css">

NPM

npm install @coreui/icons --save

Yarn

yarn add @coreui/icons

Or, you can also clone or download this repository as zip.

Usage

Basic Use

You can place CoreUI Icons just about anywhere using a CSS style prefix and the icon’s name. CoreUI Icons are designed to be used with inline elements ex. <i> or <span>.

Please use cil- prefix for linear icons, cib- prefix for brand icons, and cif- prefix for flag icons.

<i class="cil-energy"></i>
<i class="cib-twitter"></i>
<i class="cif-us"></i>

SVG Sprites

SVG sprites let you quickly use vector icons in your website. We have prepared all the icon set styles into their own SVG sprites.

Place sprite files with the rest of your static files, like images and styles, in your project. Make sure to add a proper path to the SVG sprite file, and use the fragment identifier specific to the SVG icon or symbol you want to display.

<svg>
  <use xlink:href="path/to/free.svg#cil-airplane-mode"></use>
</svg>
<svg>
  <use xlink:href="path/to/brand.svg#cib-twitter"></use>
</svg>
<svg>
  <use xlink:href="path/to/flag.svg#cif-us"></use>
</svg>

SVG Symbols

When you download your icon set, it comes with a sprites directory that contains SVG icon definitions. These icons can be referenced and used as inline SVGs like so:

<!-- Define the symbols -->
<symbol id="cil-apple" viewBox="0 0 24 24">
<title>apple</title>
<path d="M21.207 9.987c-0.497-1.275-1.29-2.262-2.293-2.863-0.25 0.477-0.524 0.888-0.835 1.267l0.010-0.013c0.002 0.001 0.004 0.002 0.005 0.003 1.494 0.859 2.364 3.054 2.114 5.338-0.414 3.784-1.563 6.377-3.236 7.302-1.087 0.601-2.444 0.516-4.031-0.254l-0.155-0.075h-1.143l-0.155 0.075c-1.588 0.77-2.944 0.856-4.031 0.254-1.673-0.925-2.822-3.518-3.236-7.302-0.25-2.284 0.619-4.479 2.114-5.338 0.445-0.259 0.979-0.411 1.549-0.411 0.011 0 0.023 0 0.034 0l-0.002-0c1.132 0 2.436 0.53 3.853 1.578l0.051 0.037s2.043-0.248 2.852-0.616c2.439-1.107 2.976-2.867 3.072-3.106 0.262-0.632 0.414-1.366 0.414-2.135 0-0.813-0.17-1.587-0.476-2.287l0.014 0.037-0.191-0.477-0.513 0.005c-3.151 0.036-5.692 2.598-5.692 5.755 0 0.255 0.017 0.507 0.049 0.754l-0.003-0.029c-0.886-0.496-1.747-0.813-2.573-0.944-1.169-0.186-2.241-0.005-3.186 0.538-1.038 0.596-1.855 1.601-2.364 2.906-0.463 1.186-0.638 2.57-0.493 3.895 0.475 4.344 1.859 7.267 4.001 8.452 0.655 0.37 1.438 0.588 2.272 0.588 0.010 0 0.021-0 0.031-0h-0.002c0.918-0 1.904-0.244 2.952-0.73h0.461c1.987 0.923 3.754 0.971 5.253 0.142 2.142-1.185 3.526-4.107 4.001-8.452 0.145-1.325-0.030-2.709-0.493-3.895zM15.376 2.851c0.322-0.143 0.697-0.251 1.088-0.305l0.022-0.003c0.106 0.354 0.167 0.761 0.167 1.182 0 2.15-1.593 3.927-3.663 4.215l-0.022 0.003c-0.106-0.354-0.167-0.76-0.167-1.181 0-1.743 1.048-3.242 2.547-3.901l0.027-0.011z"></path>
</symbol>

<!-- Use the defined symbols -->
<svg>
  <use xlink:href="#cil-apple"></use>
</svg>

It is also possible to link to an external SVG containing the definitions:

<svg class="icon-home">
  <use xlink:href="path/to/free.svg#cil-apple"></use>
</svg>

CoreUI Icons for Angular

CoreUI Icons for React.js

CoreUI Icons for Vue.js

CoreUI Icons PRO

If our free icon set is insufficient you can buy CoreUI Icons Pro with more than 2000 icons, and more styles - Solid, Duo-Tone and Linear.

License

CoreUI Icons Free Icons

CoreUI Icons Free is free, open source, and GPL friendly. You can use it for commercial projects, open source projects, or really almost whatever you want.

  • Icons — CC BY 4.0 License
    • In the CoreUI Icons Free, the CC BY 4.0 license applies to all icons packaged as .svg and .js files types.
  • Fonts — SIL OFL 1.1 License
    • In the CoreUI Icons Free, the SIL OLF license applies to all icons packaged as web and desktop font files.
  • Code — MIT License
    • In the CoreUI Icons Free, the MIT license applies to all non-font and non-icon files.

CoreUI Icons Brand and Flag Icons

Brand Icons

All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa. Please do not use brand logos for any purpose except to represent the company, product, or service to which they refer.

CC0 1.0 Universal Statement of Purpose

The laws of most jurisdictions throughout the world automatically confer exclusive Copyright and Related Rights (defined below) upon the creator and subsequent owner(s) (each and all, an "owner") of an original work of authorship and/or a database (each, a "Work").

Certain owners wish to permanently relinquish those rights to a Work for the purpose of contributing to a commons of creative, cultural and scientific works ("Commons") that the public can reliably and without fear of later claims of infringement build upon, modify, incorporate in other works, reuse and redistribute as freely as possible in any form whatsoever and for any purposes, including without limitation commercial purposes. These owners may contribute to the Commons to promote the ideal of a free culture and the further production of creative, cultural and scientific works, or to gain reputation or greater distribution for their Work in part through the use and efforts of others.

For these and/or other purposes and motivations, and without any expectation of additional consideration or compensation, the person associating CC0 with a Work (the "Affirmer"), to the extent that he or she is an owner of Copyright and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and publicly distribute the Work under its terms, with knowledge of his or her Copyright and Related Rights in the Work and the meaning and intended legal effect of CC0 on those rights.

  1. Copyright and Related Rights. A Work made available under CC0 may be protected by copyright and related or neighboring rights ("Copyright and Related Rights"). Copyright and Related Rights include, but are not limited to, the following:

i. the right to reproduce, adapt, distribute, perform, display, communicate, and translate a Work;

ii. moral rights retained by the original author(s) and/or performer(s);

iii. publicity and privacy rights pertaining to a person's image or likeness depicted in a Work;

iv. rights protecting against unfair competition in regards to a Work, subject to the limitations in paragraph 4(a), below;

v. rights protecting the extraction, dissemination, use and reuse of data in a Work;

vi. database rights (such as those arising under Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, and under any national implementation thereof, including any amended or successor version of such directive); and

vii. other similar, equivalent or corresponding rights throughout the world based on applicable law or treaty, and any national implementations thereof.

  1. Waiver. To the greatest extent permitted by, but not in contravention of, applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and unconditionally waives, abandons, and surrenders all of Affirmer's Copyright and Related Rights and associated claims and causes of action, whether now known or unknown (including existing as well as future claims and causes of action), in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each member of the public at large and to the detriment of Affirmer's heirs and successors, fully intending that such Waiver shall not be subject to revocation, rescission, cancellation, termination, or any other legal or equitable action to disrupt the quiet enjoyment of the Work by the public as contemplated by Affirmer's express Statement of Purpose.

  2. Public License Fallback. Should any part of the Waiver for any reason be judged legally invalid or ineffective under applicable law, then the Waiver shall be preserved to the maximum extent permitted taking into account Affirmer's express Statement of Purpose. In addition, to the extent the Waiver is so judged Affirmer hereby grants to each affected person a royalty-free, non transferable, non sublicensable, non exclusive, irrevocable and unconditional license to exercise Affirmer's Copyright and Related Rights in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "License"). The License shall be deemed effective as of the date CC0 was applied by Affirmer to the Work. Should any part of the License for any reason be judged legally invalid or ineffective under applicable law, such partial invalidity or ineffectiveness shall not invalidate the remainder of the License, and in such case Affirmer hereby affirms that he or she will not (i) exercise any of his or her remaining Copyright and Related Rights in the Work or (ii) assert any associated claims and causes of action with respect to the Work, in either case contrary to Affirmer's express Statement of Purpose.

  3. Limitations and Disclaimers.

a. No trademark or patent rights held by Affirmer are waived, abandoned, surrendered, licensed or otherwise affected by this document.

b. Affirmer offers the Work as-is and makes no representations or warranties of any kind concerning the Work, express, implied, statutory or otherwise, including without limitation warranties of title, merchantability, fitness for a particular purpose, non infringement, or the absence of latent or other defects, accuracy, or the present or absence of errors, whether or not discoverable, all to the greatest extent permissible under applicable law.

c. Affirmer disclaims responsibility for clearing rights of other persons that may apply to the Work or any use thereof, including without limitation any person's Copyright and Related Rights in the Work. Further, Affirmer disclaims responsibility for obtaining any necessary consents, permissions or other rights required for any use of the Work.

d. Affirmer understands and acknowledges that Creative Commons is not a party to this document and has no duty or obligation with respect to this CC0 or use of the Work.

For more information, please see http://creativecommons.org/publicdomain/zero/1.0/

coreui-icons's People

Contributors

mrholek avatar woothu avatar xidedix avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

coreui-icons's Issues

PNGs no longer present

I had been using your icons in a prototype, and decided to see if there were any new ones. Apparently there are, but they’re no longer in handy PNG form. This means I can’t browse through the icons with Finder (since there’s no Quick Look for SVG).

Can you restore the PNGs?

(It might also be useful to show a version number somewhere, I am not spotting one. My download has PNGs with a date stamp of 27 Jan 2020. Today’s download has SVGs with a date stamp of 6 July 2020.)

Create SCSS variable for SVG path

Now there is a variable for $coreui-icons-font-path, but not for the SVG path. Current SVG path is set to ../svg which I would like to change.

Flag variable names are uppercase, but SVG files are lowercase

As the title describes, the variables in the SCSS for the flag icons are in uppercase:

https://github.com/coreui/coreui-icons/blob/master/scss/flag/_variables.scss#L3

But the SVG files are in lowercase:

https://github.com/coreui/coreui-icons/tree/master/svg/flag

This results in this error when trying to transpile the SCSS to CSS:

Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve '../svg/flag/cif-AD.svg' in '/project/node_modules/@coreui/icons/scss/flag'

Changing the variables to lowercase fixed this for me.

How to use coreui icons pro with coreui react admin template?

Hello,

I purchased CoreUI React Admin Template and then CoreUI Icons Pro package. Since then I was never able to get the Pro Icons to work the way it works like the Free Icons (using the element).

Is there a documentation that I can use? Obviously there is a missing here. You should have a support forum, or documentation on how to use the package.

Weird circle over brazilian flag

There is a weird half circle over the brazil flag.

chrome_Er34KGW9fA

<CIcon class=name="'cif-' + entry.country.countryShort.toLowerCase()"/>

I'm using Vue.JS with coreui-pro vue 3.0 beta-1 and coreui/icons 1.0.0

Should font paths be relative to package?

Description:
I recently pulled coreui and coreui icons to a Laravel setup and when attempting to run npm build, NPM was not able to trace the .eot file to the right location because it was using ../ as seen in:

$coreui-icons-font-path: "../fonts" !default;

Experiment:
I tested replacing ../ with ~@coreui/icons/ and this did the trick. NPM was able to build the proper files and I'm now able to load the icons in the page.

Could/Should this be corrected in font related files or should I be working with these packages differently? 🧐

Thanks,

How to use icons in freeSet in r2.0.1

I have installed coreui/icons r2.0.1 via npm, and in src/index.js:
React.icons = icons

While, I try to use cli-cart as follow:
<CIcon content="cil-cart" />

The console log tells me:
CIcon component: icon name 'cil-cart' does not exist in React.icons object. To use icons by name prop you need to make them available globally by adding them to React.icons object. CIcon component docs: https://coreui.io/react/docs/components/CIcon

I follow the steps in:
coreui/coreui-react#177
https://stackoverflow.com/questions/62840344/coreui-icon-doesnt-appear-in-my-react-js-app

But it doesn't show any icons? Do I miss something?

Thanks.

Default icon path to icon files in SCSS is wrong (Free icons)

Ran into this yesterday when trying to build these icons. The SASS transpilation step fails because the path defined for the Icon files here: https://github.com/coreui/coreui-icons/blob/master/scss/free/_variables.scss#L2 is incorrect. The fonts folder is actually one more level back, so this:

$coreui-icons-font-path: "../fonts" !default;

should be

$coreui-icons-font-path: "../../fonts" !default;

Here's the error I was receiving:

Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/CoreUI-Icons-Free.eot' in '/project/node_modules/@coreui/icons/scss/free'

Most of icons are not working with Vuejs

Below is a part of package.json

  "dependencies": {
    "@coreui/coreui": "^3.2.0",
    "@coreui/icons": "^2.0.0-beta.5",
    "@coreui/utils": "^1.3.1",
    "@coreui/vue": "^3.1.1",
    "@coreui/vue-chartjs": "^1.0.5",
    "@webplayer/coreplayer": "^0.2.3",
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-advanced-cropper": "^0.17.3",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "vuex-persistedstate": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-vuex": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^1.19.1",
    "vue-template-compiler": "^2.6.11",
    "node-sass": "~4.14.1",
    "sass-loader": "~8.0.2"
  }

and the problem is that most of icons with cil-, ,cis-.. are not working.

It even doesn't work in Coreui admin template.

For example,

{
        _name: 'CSidebarItem',
        name: '**************',
        to: '/',
        icon: 'cil-clock',
      },

If I use cil-clock nothing shows up.

Microsoft Teams Icon

Not sure if this is the right place for requests...but would it possible to add the Microsoft Teams Icon?
Many thanks and keep up the good work!

Googe pay icon

The Google Pay icon seems to have changed. Would love to see a new icon if you take these sorts of requests here.

Some icons are not working

It seams that there a some icons that are not displayed, e.g. "cui-dashboard", "cui-chalkboard", " cui-accessible" etc..
The Plus Icon for example doesn´t work with "cui-plus" but with "icon-plus" instead. How should i know wich prefix should be used ?

unable to load CSS style images when deploy angular coreui in off root Nginx

I deployed my coreui angular app in ngnix as off root deployment. When i launch the App URL, I see few images ( rendered from CSS classes as shown below) not rendering in the UI.

CSS Class to render image:
.icon-speech {
content: "\e02c" !important;
}

Ngnix config file:

server {
#-------

location /rig-activity {

    set $url http://edge_rig-activity-service;
                rewrite ^/rig-activity(.*) $1 break;
                proxy_pass $url;
        }

        location /rig-activity-ui/ {
            #enable for debug mode
            #proxy_pass http://localhost:4200;


            #root /www/html;
            alias /www/rig-activity-ui/;

            #index  index.html index.htm;

            try_files $uri$args $uri$args/ $uri/ /rig-activity-ui/index.html;
        }

}
coreui_icons_issue

Icons list shows the wrong description

The icons list at coreui icons shows the wrong description/name after the icon for "Bowling".

Starting from '3D' until 'Bowling' all icons have the right description but after 'Bowling' every icon seems to have shifted the description to the next items.

Everything is broken!

Hi, the descriptions / names of the icons are all wrong in documentation. Also I have the last version (1.0.1), and I've been trying a lot of free icons and no one works....

Include path for SVG files in Flag icons is incorrect

This is similar to #20 but for the Flag icons.

The path defined here: https://github.com/coreui/coreui-icons/blob/master/scss/flag/_core.scss#L14 isn't quite right because the svg folder is actually one level deeper. This error was emitted when transpiling the SCSS:

Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve '../svg/flag/cif-ad.svg' in '/project/node_modules/@coreui/icons/scss/flag'

To fix this, I changed this line:

background-image: url(../svg/flag/#{$coreui-icons-prefix}#{$icon}.svg);

to

background-image: url(../../svg/flag/#{$coreui-icons-prefix}#{$icon}.svg);

NPM can't find coreui icons

I'm trying to install coreui icons through npm install and everytime I got this error:

npm ERR! code E404
npm ERR! 404 Not Found: @coreui/icons@^0.2.0

And I get the same error trying to install with npm install @coreui/icons --save

Here's the log:

2900 verbose stack Error: 404 Not Found: @coreui/icons@^0.2.0
2900 verbose stack     at fetch.then.res (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/pacote/lib/fetchers/registry/fetch.js:42:19)
2900 verbose stack     at tryCatcher (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
2900 verbose stack     at Promise._settlePromiseFromHandler (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:512:31)
2900 verbose stack     at Promise._settlePromise (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:569:18)
2900 verbose stack     at Promise._settlePromise0 (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:614:10)
2900 verbose stack     at Promise._settlePromises (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:693:18)
2900 verbose stack     at Async._drainQueue (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:133:16)
2900 verbose stack     at Async._drainQueues (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:143:10)
2900 verbose stack     at Immediate.Async.drainQueues [as _onImmediate] (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:17:14)
2900 verbose stack     at runCallback (timers.js:696:18)
2900 verbose stack     at tryOnImmediate (timers.js:667:5)
2900 verbose stack     at processImmediate (timers.js:649:5)
2901 verbose cwd /home/yuri/repos/cp-frontend2
2902 verbose Linux 4.14.57-1-MANJARO
2903 verbose argv "/home/yuri/.nvm/versions/node/v10.2.1/bin/node" "/home/yuri/.nvm/versions/node/v10.2.1/bin/npm" "install"
2904 verbose node v10.2.1
2905 verbose npm  v6.2.0
2906 error code E404
2907 error 404 Not Found: @coreui/icons@^0.2.0
2908 verbose exit [ 1, true ]

My environment:
Manjaro: GNOME 17.1.11
Node: 10.2.1
NVM: 0.33.11

Same size for all flags

All the flags are currently different sizes. It would be nice if they were all the same size.

[suggestion] Provide coverage for more Simple Line Icons in free version

In the upgrade from CoreUI 2 to CoreUI 3, the recommendation is to stop using FontAwesome, and Simple Line Icons, and to start using CoreUI icons.

This is great however it comes at a cost: You lose access to a significant amount of icons.

It would be a great contribution to your dedication to open source if the free set of CoreUI icons included replacements for more of the icons that were provided by Simple Line Icons.

Given the Simple Line Icons contains <180 icons, and most of the ones missing from the free version do exist in the pro version of CoreUI icons, this would largely be a judgement call and business decision on your end that I hope you can consider.

Some of the ones that would be valuable replacements for Simple Line Icons to include in the free version:

Thanks!

Update React Version to 18+

Build is failing in React 18 because of older version of React in this repository

npm ERR! While resolving: @coreui/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"~18.2.0" from the root project
npm ERR!   peer react@">=17" from @coreui/[email protected]
npm ERR!   node_modules/@coreui/react
npm ERR!     @coreui/react@"^4.2.3" from the root project
npm ERR!   18 more (@coreui/react-pro, @emotion/react, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^[17](https://github.com/Trademanza/Trademanza-Admin-KYC/runs/7055269253?check_suite_focus=true#step:3:18)" from @coreui/[email protected]
npm ERR! node_modules/@coreui/icons-react
npm ERR!   @coreui/icons-react@"^2.0.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^17" from @coreui/[email protected]
npm ERR!   node_modules/@coreui/icons-react
npm ERR!     @coreui/icons-react@"^2.0.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/runner/.npm/eresolve-report.txt for a full report.

How to use CoreUI Icons Pro with CoreUI Vue Admin template?

Hello,

I purchased CoreUI Admin Template (all frameworks) and then CoreUI Icons Pro package. Since then I was never able to get the Pro Icons work the way it work like the Free Icons (using the element).

Is there a documentation that I can use? Obviously there is a missing here. You should have a support forum, or documentation how to use the package.

CoreUI icons package is huge!

How can I reduce the bundle size of the icons package?

Currently, the size is 10.2MB

I’m just importing these ones:

//icons.js    
import {
      cilEnvelopeClosed,
      cilEnvelopeOpen,
      cilMagnifyingGlass,
      cilMoon,
      cilSpeedometer,
      cilSun,
      cilAccountLogout,
      cilUser,
      cilXCircle,
      cilX,
    } from '@coreui/icons'

import { logo } from './logo'

export const iconsSet = Object.assign({}, { logo }, {
  cilEnvelopeClosed,
  cilEnvelopeOpen,
  cilMagnifyingGlass,
  cilMoon,
  cilSpeedometer,
  cilSun,
  cilAccountLogout,
  cilUser,
  cilXCircle,
  cilX,
})
//main.js
import { iconsSet as icons } from './assets/icons/icons.js'
...
...
...
new Vue({
  el: '#app',
  router,
  store,
  icons
  components: {
    App
  },
  template: '<App/>',
  apolloProvider: createProvider(),
})

image

can't use icons

I download coreui-free-vue-admin-template and want use whole icon from 'coreui-icons'
my code is:
in main.js
import { freeSet, brandSet, flagSet } from '@coreui/icons'
new Vue({ el: '#app', router, store, icons: { freeSet, brandSet, flagSet }, template: '<App/>', components: { App, }, })
in vue file
<CIcon name="cil-pregnant" />
but it not work it,

image

Dist contains git merge conflicts

When I installed coreui-free-bootstrap-admin-template on branch v3-next and ran npm run build the free.min.css file inside the resulting dist/vendors/@coreui/icons/css/ folder contains git merge conflicts:

Screen Shot 2020-02-04 at 5 18 29 AM

@charset "UTF-8";/*!
<<<<<<< HEAD:scss/free.scss
 * CoreUI Icons Free - Open Source Icons
 * @version v0.4.1
=======
 * CoreUI Icons Free Open Source Icons
 * @version v1.0.0-beta.3
>>>>>>> v1-next:scss/free/free-icons.scss
 * @link https://coreui.io/icons
 * Copyright (c) 2019 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://coreui.io/icons/license)
 */@font-face{font-family:CoreUI-Icons-Free;src:url(../

please add as simple 'check' icon

Please add as simple 'check' icon, similar in style with current plus / x icons.
There's only a double-lined check icon now.

Thanks :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.