Atlas Icons 开源项目使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00851/article/details/142117482

Atlas Icons 开源项目使用教程

Atlas-icons-font 项目地址: https://gitcode.com/gh_mirrors/at/Atlas-icons-font

1. 项目介绍

Atlas Icons 是一个开源的图标库，提供了丰富的图标资源，支持 SVG 格式、字体、Figma、Adobe XD 和 Iconjar 等多种使用方式。该项目由 Vectopus 开发，旨在为开发者提供简单易用的图标解决方案。Atlas Icons 的图标可以通过 Web 字体或 NPM 包的形式集成到项目中，适用于各种前端开发场景。

2. 项目快速启动

2.1 安装

你可以通过 NPM 安装 Atlas Icons：

npm install @vectopus/atlas-icons

2.2 引入样式文件

在项目的主样式文件中引入 Atlas Icons 的样式文件：

@import url("/node_modules/@vectopus/atlas-icons/style.css");

或者直接在 HTML 文件的 <head> 标签中引入：

<link rel="stylesheet" href="https://unpkg.com/@vectopus/atlas-icons/style.css">

2.3 使用图标

在 HTML 中使用 Atlas Icons 的图标：

<i class="ai ai-icon-name"></i>

将 ai-icon-name 替换为你需要的图标名称。

3. 应用案例和最佳实践

3.1 前端项目中的应用

在 React 项目中使用 Atlas Icons：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <i className="ai ai-icon-name"></i>
      <p>这是一个使用 Atlas Icons 的 React 应用示例。</p>
    </div>
  );
}

export default App;