Geomicons - Một biểu tượng SVG được mã hóa bằng tay độc đáo

Các biểu tượng web đang nhanh chóng trở thành chuẩn mực cho thiết kế web hiện đại. Chúng là tài sản lớn cho các nhà thiết kế web vì những các biểu tượng có thể được tùy chỉnh thông qua CSS và thay đổi kích thước mà không giảm chất lượng.

Nhưng một số gói biểu tượng có thể cảm thấy cồng kềnh và quá lớn cho các trang web nhỏ hơn. Đó là nơi Geomicons thực sự tỏa sáng.

Đây là một gói biểu tượng mã hóa tùy chỉnh chạy trên SVG. Bạn có thể nhúng các biểu tượng thông qua các tập lệnh JS hoặc dưới dạng tệp SVG trực tiếp vào trang của bạn. Dù bằng cách nào, chúng là những vectơ đẹp và siêu dễ dàng để sắp xếp lại.

Trang Geomicons chính có bản demo đầy đủ của tất cả các biểu tượng. Chúng khá đơn giản và theo phong cách thiết kế phẳng một màu truyền thống mà chúng ta đều quen thuộc.

Nhưng thông tin thiết lập của họ chắc chắn là thiếu trên trang demo. Nếu bạn muốn tìm hiểu cách thiết lập tính năng này, bạn sẽ cần truy cập vào repo GitHub để được hướng dẫn.

Theo mặc định, cái này thư viện giả định rằng bạn đang làm việc với CSS / JS để có các biểu tượng này được nhúng trực tiếp vào các yếu tố trang. Tuy nhiên, khi bạn tải xuống các biểu tượng từ GitHub, bạn sẽ nhận được tất cả các tệp SVG thô mà bạn có thể thêm trực tiếp vào HTML.

Chỉ có rắc rối là SVG thô yêu cầu chỉnh sửa nhiều hơn để thay đổi màu sắc, trong khi tuyến đường JS / CSS cho phép bạn kiểm soát màu sắc thông qua mã.

Đơn giản chỉ cần thêm geomicons.min.js tập lệnh vào tiêu đề của bạn và vượt qua biểu tượng dữ liệu thuộc tính thành các phần tử HTML. Chúng sẽ tự động nhúng các biểu tượng mà sau đó bạn có thể thao tác bằng các lớp CSS.

Một điều tôi thực sự thích về Geomicons là sự hỗ trợ cho Node. Đây là một đoạn mẫu từ repo GitHub:

var geomicons = Yêu cầu ('geomicons-open'); var pathData = geomicons.paths.love; // Trả về giá trị thuộc tính d của đường dẫn var svgString = geomicons.toString ('heart'); // Trả về chuỗi SVG

Nếu bạn không quen thuộc với Node thì có lẽ bạn sẽ không bao giờ cần sử dụng bất kỳ đoạn mã Node nào. Tương tự với phiên bản React.js của các biểu tượng này.

Vẫn có hỗ trợ cho các khung chính là một vấn đề lớn. Đó là nhiều bằng chứng cho thấy Geomicons có nghĩa là hỗ trợ bất kỳ loại trang web bằng cách tập trung vào hiệu suất đầu tiên.

Để cung cấp cho các biểu tượng này một bản chạy thử, bạn có thể kéo một bản sao qua npm hoặc tải chúng trực tiếp qua GitHub.

Ngoài ra còn có một biểu tượng phác thảo được gọi là Geomicons Wired mà bạn cũng có thể muốn thử nghiệm.

Dù bằng cách nào, đây là một biểu tượng tuyệt vời cho các nhà thiết kế web tối giản. Một lựa chọn hoàn hảo để tối ưu hóa trang web của bạn với các biểu tượng đẹp trong khi giảm tổng thời gian tải trang.