17: Công cụ xây dựng - IcoMoon - Thủ thuật CSS

Anonim

Thuật ngữ "công cụ xây dựng" có thể đáng sợ. Nó gợi nhớ đến các công cụ dòng lệnh ưa thích yêu cầu cấu hình và các phụ thuộc hệ thống kỳ lạ bị phá vỡ khi bạn nhìn nhầm. Đôi khi các công cụ xây dựng là như vậy, và chúng ta sẽ đi đến đó trong loạt bài này. Nhưng thực sự một công cụ xây dựng chỉ là thứ để giúp quá trình của bạn dễ dàng hơn. Tự động hóa một cái gì đó mà trước đây bạn đã làm bằng tay.

IcoMoon, theo nghĩa đó, là một công cụ xây dựng. Nó là một công cụ phổ biến để xây dựng các phông chữ biểu tượng tùy chỉnh. Thật tuyệt vời cho điều đó. Tôi ủng hộ bất kỳ công cụ nào khuyến khích các nhà phát triển giao diện người dùng tạo nội dung tùy chỉnh, được sắp xếp hợp lý cho những gì họ cần thay vì bao gồm bồn rửa nhà bếp (mọi biểu tượng trên trái đất) và chỉ sử dụng một chút của nó. IcoMoon không chỉ dành cho các phông chữ biểu tượng @ font-face, nó có thể xuất ra các khối SVG defs, mà nó gọi là SVG sprite (cũng là một thuật ngữ hoàn toàn có thể chấp nhận được).

Về cơ bản, bạn nhấp vào các biểu tượng bạn muốn và sau đó xuất nó và bạn sẽ có được một khối SVG defs hoàn hảo để sử dụng. Lưu ý rằng họ vẫn chưa sử dụng và tôi không rõ tại sao, nhưng điều đó có nghĩa là bạn sẽ cần phải tự mình bao gồm viewBoxvà các nội dung hỗ trợ tiếp cận khi triển khai chúng. Đăng ký tài khoản ở đó và bạn có thể lưu dự án, nghĩa là bạn có thể quay lại và xóa / thêm nội dung nếu cần thay vì bắt đầu lại từ đầu. Điều đó thực sự làm cho nó trở thành một công cụ xây dựng.

Điều quan trọng cần biết về IcoMoon: bạn có thể thêm SVG của riêng mình. Bạn không bị giới hạn những gì bạn thấy trong ứng dụng mặc định. Bạn có thể lấy SVG từ nơi khác và chỉ cần thêm nó vào đó và nó sẽ lưu trong dự án của bạn. Bạn có thể sử dụng IcoMoon như một công cụ xây dựng chỉ với SVG tùy chỉnh của riêng bạn và nó sẽ vẫn hữu ích.