许可证
CoreUI 图标 PRO - Duotone, 线性, 固态
只能从我们的网站购买有效许可证 页: 1 为了合法地使用 CoreUI 图标 PRO.
预览文档( D)
https://coreui.io/icons/ (中文(简体) )
安装
国家预防机制
npm install @coreui/icons-pro --save
雅伦
yarn add @coreui/icons-pro
使用量
基本用途
使用 CSS 样式前缀和图标名称,您可以在任何地方放置 CoreUI 图标 。 CoreUI 图标被设计为与内含元素一起被使用 ex. <i> 或者说 <span>。 。 。 .
请使用 cil- 线性图标的前缀, cib- 品牌图标的前缀,以及 cif- 旗帜图标的前缀.
<i class="cil-energy"></i>
<i class="cib-twitter"></i>
<i class="cif-us"></i>
SVG 样板
SVG 图标允许您在网站上快速使用向量图标 。 我们已经将所有图标集的样式都准备好,形成他们自己的SVG图案.
将图示文件和其他静态文件放在您的项目中, 如图像和样式。 确保为 SVG 图示文件添加合适的路径,并使用您想要显示的 SVG 图标或符号特有的碎片标识符 .
<svg>
<use xlink:href="path/to/linear.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 符号
当您下载您的图标集时, 它会出现一个包含 SVG 图标定义的图示目录 。 这些图标可以被引用,并作为内置的SVG像这样:
<!-- 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>
还可与包含下列定义的外部SVG链接:
<svg class="icon-home">
<use xlink:href="path/to/lineear.svg#cil-apple"></use>
</svg>
引用外部 SVG 的优点是您的图标被缓存, 并有一个 HTTP 请求 。 但是外部的SVG和HTML应该从同一个域来服务. 这种方法在现代浏览器中效果很好,除了IE 9+. 为了支持 IE 9+, 您应该使用 /js/svgxuse.js 或者说 /js/svgxuse.min.js。如果图标被正确装入,这种多填充会检测;如果不装入,它会发出一个HTTP请求来获取并缓存符号定义.
<script defer src="https://unpkg.com/@coreui/icons/js/svgxuse.js"></script>
Vue.js 的 CoreUI 图标
请检查 官方仓库
React.js 的核心UI 图标
请检查 官方仓库