### Vue.js Integration Example Source: https://context7.com/b9348/tn-icons/llms.txt Shows how to integrate TN icons into Vue.js components for dynamic rendering. Includes examples for static icons, dynamic binding, conditional rendering, and icons within buttons and navigation bars. ```vue ``` -------------------------------- ### Install Tuniao Icon Font via npm Source: https://context7.com/b9348/tn-icons/llms.txt Installs the Tuniao Icon Font package using npm. This is the primary method for integrating the icon library into your project for use with build tools. ```bash npm install @tuniao/tn-icon ``` -------------------------------- ### Custom Styling with CSS Source: https://context7.com/b9348/tn-icons/llms.txt Demonstrates how to style icons using standard CSS properties for size, color, and interactive effects. Includes examples for animations like spinning. ```html ``` -------------------------------- ### Display Media & Communication Icons in HTML Source: https://context7.com/b9348/tn-icons/llms.txt These HTML examples illustrate how to use icons for media playback, audio controls, and communication features. They cover play/stop controls, volume adjustments, and messaging interfaces. ```html ``` -------------------------------- ### Basic Tuniao Icon Usage Source: https://context7.com/b9348/tn-icons/llms.txt Shows the fundamental way to display Tuniao icons using HTML `` elements with specific `tn-icon-*` CSS classes. It includes examples of basic icons, filled variants, and applying custom styles. ```html ``` -------------------------------- ### Display Chinese Zodiac Icons in HTML Source: https://context7.com/b9348/tn-icons/llms.txt These HTML code examples provide the necessary classes to display all 12 Chinese zodiac animal icons. Each icon is represented by a specific class name. ```html ``` -------------------------------- ### Tuniao Social Media & Brand Icons Source: https://context7.com/b9348/tn-icons/llms.txt Illustrates the usage of Tuniao icons for various social media platforms, development tools, and brand logos. Includes examples for WeChat, QQ, GitHub, Facebook, and more. ```html ``` -------------------------------- ### Tuniao Navigation Icons Source: https://context7.com/b9348/tn-icons/llms.txt Provides examples of using Tuniao icons specifically for navigation elements, including directional arrows and common navigation actions like home, menu, and search. ```html ``` -------------------------------- ### Display User & Profile Icons in HTML Source: https://context7.com/b9348/tn-icons/llms.txt This HTML code shows how to implement user account, profile, and team management icons. It includes icons for user profiles, team collaboration, gender representation, and authentication. ```html ``` -------------------------------- ### Display Status & Feedback Icons in HTML Source: https://context7.com/b9348/tn-icons/llms.txt These HTML snippets demonstrate how to display status and feedback icons such as success, error, warning, and loading states. They utilize predefined CSS classes for styling. ```html ``` -------------------------------- ### Device and Hardware Icons Source: https://context7.com/b9348/tn-icons/llms.txt HTML elements representing icons for devices, hardware, and connectivity status. Includes icons for phones, computers, network signals, and battery levels. ```html ``` -------------------------------- ### Display Weather Icons in HTML Source: https://context7.com/b9348/tn-icons/llms.txt This set of HTML snippets shows how to display various weather condition icons, including sun, clouds, rain, snow, and wind. It also includes icons for time of day and temperature representation. ```html ``` -------------------------------- ### Include Tuniao Icon Font CSS Source: https://context7.com/b9348/tn-icons/llms.txt Demonstrates how to include the Tuniao Icon Font CSS file in your HTML. This can be done by referencing the file within your 'node_modules' directory or using a CDN variant. ```html ``` -------------------------------- ### Empty State Icons Source: https://context7.com/b9348/tn-icons/llms.txt HTML elements representing icons for empty states and placeholder scenarios. These are typically used when content is not available. ```html ``` -------------------------------- ### Tuniao E-commerce Icons Source: https://context7.com/b9348/tn-icons/llms.txt Demonstrates the use of Tuniao icons relevant to e-commerce, including shopping actions, payment methods, order management, and promotional elements. ```html ``` -------------------------------- ### Display Western Constellation Icons in HTML Source: https://context7.com/b9348/tn-icons/llms.txt This HTML code demonstrates how to display the 12 Western zodiac constellation icons, along with a general constellation icon. Each icon is invoked using a specific CSS class. ```html ``` -------------------------------- ### Transportation Icons Source: https://context7.com/b9348/tn-icons/llms.txt HTML elements representing icons for various modes of transportation and travel-related items. Includes ground, air, water transport, and travel accessories. ```html ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.